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>

html php javascript

@RafliSaputra48

38 Kontribusi 0 Poin

Diperbarui 7 tahun yang lalu

7 Jawaban:

maksudnya saat klik maunya berarti langsung nambah 2 li/item. 1 dari #myinput 1 dari #akuinput

begitu ?

@sifai

80 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

Maksudnya 2 List, dijadiin satu?

@CodenameJR

278 Kontribusi 107 Poin

Dipost 7 tahun yang lalu

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>

@sifai

80 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

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>

@sifai

80 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

Maksudnya waktu mau ngisi di list pertama, nah sumbernya itu dari input text 1 digabung input text ke 2

@RafliSaputra48

38 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

kalau bgitu pake contoh jawaban saya yg ke2, saya kan kasih 2 contoh case. nah yg ke2 brati dicoba begitu bukan yg diharapkan.

@sifai

80 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

alhamdulillah bisa gan.. @sifai Ane udh jadiin sebagai jawaban terbaik

@RafliSaputra48

38 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Kelas Premium! Belajar Javascript untuk website

Mengisi list dari 2 input text

Kelas Premium!
Belajar bikin website dari nol sekarang

Kelas Premium!
Belajar Javascript untuk website