Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Mengisi list dari 2 input text
Permisi selamat malam semua.. saya izin bertanya. Jadi saya rencananya ingin mengisi list dari 2 input text sekaligus. Nah kira" kodingannya kayak gimana ya? Mohon bantuannya ya.. Berikut ini codingannya
<html>
<head>
<title>Warteg Online</title>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
</style>
<div id="myDIV" class="header">
<h2>My To Do List</h2>
<input id="myInput" type="text" placeholder="Title...">
<input id="akuInput" type="text" placeholder="Title...">
</div>
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL">
</ul>
<script>
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("akuInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("akuInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
</script>
</body>
</html>
0
7 Jawaban:
maksudnya saat klik maunya berarti langsung nambah 2 li/item. 1 dari #myinput 1 dari #akuinput
begitu ?
0
Jika ingin create 2 LI dari 2 Inputan sperti ini :
<html>
<head>
<title>Warteg Online</title>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
</style>
<div id="myDIV" class="header">
<h2>My To Do List</h2>
<input id="myInput" type="text" placeholder="Title...">
<input id="akuInput" type="text" placeholder="Title...">
</div>
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL">
</ul>
<script>
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var inputValue = document.getElementById("akuInput").value;
var myinputValue = document.getElementById("myInput").value;
if (inputValue === '' || myinputValue==='') {
alert("ke 2 inputan harus diisi !");
} else {
var li1 = document.createElement("li");
var li2 = document.createElement("li");
var t1 = document.createTextNode(inputValue);
var t2 = document.createTextNode(myinputValue);
li1.appendChild(t1);
li2.appendChild(t2);
document.getElementById("myUL").appendChild(li1);
document.getElementById("myUL").appendChild(li2);
document.getElementById("akuInput").value = "";
document.getElementById("myInput").value = "";
var span1 = document.createElement("SPAN");
var txt1 = document.createTextNode("\u00D7");
span1.className = "close";
span1.appendChild(txt1);
var span2 = document.createElement("SPAN");
var txt2 = document.createTextNode("\u00D7");
span2.className = "close";
span2.appendChild(txt2);
li1.appendChild(span1);
li2.appendChild(span2);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
}
</script>
</body>
</html>
0
Jawaban Terpilih
Jika ingin menggabungkan 2 inputan dalam satu li
<html>
<head>
<title>Warteg Online</title>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
</style>
<div id="myDIV" class="header">
<h2>My To Do List</h2>
<input id="myInput" type="text" placeholder="Title...">
<input id="akuInput" type="text" placeholder="Title...">
</div>
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL">
</ul>
<script>
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var inputValue = document.getElementById("akuInput").value;
var myinputValue = document.getElementById("myInput").value;
if (inputValue === '' || myinputValue==='') {
alert("ke 2 inputan harus diisi !");
} else {
var li1 = document.createElement("li");
var t1 = document.createTextNode(inputValue +' '+myinputValue);
li1.appendChild(t1);
document.getElementById("myUL").appendChild(li1);
document.getElementById("akuInput").value = "";
document.getElementById("myInput").value = "";
var span1 = document.createElement("SPAN");
var txt1 = document.createTextNode("\u00D7");
span1.className = "close";
span1.appendChild(txt1);
li1.appendChild(span1);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
}
</script>
</body>
</html>
0
Maksudnya waktu mau ngisi di list pertama, nah sumbernya itu dari input text 1 digabung input text ke 2
0
kalau bgitu pake contoh jawaban saya yg ke2, saya kan kasih 2 contoh case. nah yg ke2 brati dicoba begitu bukan yg diharapkan.
0
alhamdulillah bisa gan.. @sifai Ane udh jadiin sebagai jawaban terbaik
0