javascript - 列表项在进入 HTML+JavaScript 待办事项列表后立即被清除

Question

我正在尝试创建一个简单的 HTML 待办事项列表。目前，输入工作正常，它被附加到列表中，但立即被删除。我的代码中有什么东西导致它这样做吗？

const submitButton = document.getElementById('submitButton');
const li = document.createElement("li");

function newElement() {

  const inputValue = document.getElementById("myInput").value;
  const t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  let submitButton = document.createElement("submitButton");
  // submitButton.className = "close";
  submitButton.appendChild(txt);
  li.appendChild(submitButton);
  console.log('function passed!')

}

<h1>To-Do List</h1>
<form>
  Add to your to-do list here: <input type="text" id="myInput">
  <button onclick="newElement()" id='submitButton'>Submit</button>
  <button id='clearButton'>Clear</button>
</form>

</br>
</br>

<ul id="myUL">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

标签： javascripthtml

Answer 1

我通过完全摆脱表单标签解决了这个问题。另外，我确保将所有变量放入函数本身（对于 JavaScript 位）

这是我的代码：

function addToList() {
	const li = document.createElement("li");
	const inputValue = document.getElementById("myInput").value;
	const inputText = document.createTextNode(inputValue);	
 	li.appendChild(inputText);
	if (inputValue === '') {
	    alert("ERROR! INVALID INPUT");
	} 
	else {
	    document.getElementById("myUL").appendChild(li);
	}
	document.getElementById("myInput").value = " ";

	let submitButton = document.createElement("submitButton");
	console.log('function passed!');
	
}

<h1>To-Do List</h1>



	<script src="toDoList.js"></script>


		 Add to your list here: <input type="text" id="myInput">
		 <button onclick="addToList()" id='submitButton'>SUBMIT</button>

	</br>
	</br>

	<ul id="myUL">
	</ul>