我正在為我的 Javascript 程式創建一個待辦事項串列，我想知道如何清除從用戶輸入創建的元??素。我的意思是，用戶輸入要添加到待辦事項串列中的內容，并且應通過單擊清除按鈕清除添加的元素。我的程式的問題在于它清除了文本欄中的單詞而不是添加到串列中的元素。我想知道如何解決這個問題并讓我的清除按鈕洗掉添加的元素而不是文本欄中的單詞。這是您測驗完整代碼的鏈接：https : //jsfiddle.net/y9L1xbkr/
<body>
<form id="todo" style="float:left">
<h1 id="todo" style="font-family:Helvetica; color:#006600"><b>To Do</b>
<input type="text" id="myInput" placeholder="Add Item">
<span onclick="newElement()" >Add</span>
<input type="button" onclick="newFunction()" value="Clear">
<ul id="myUL">
</ul>
</h1>
</form>
<form id="done" style="float:right">
<h2 id="done" style="font-family:Helvetica; color:#006600"><b>Done</b></h2>
</form>
<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("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").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";
}
}
}
function newFunction() {
document.getElementById("todo").reset();
var ul = document.getElementById("myUL");
var list = document.getElementById("myInput");
var item = document.getElementById(list.value);
ul.removeChild(item);
}
</script>
uj5u.com熱心網友回復：
嗯，如果你想從串列中清除所有 Todos，只需
function newFunction() {
var todos = document.getElementById("myUL");
if (todos) {
todos.innerHTML = '';
}
}
myUL是您的串列 ID。
uj5u.com熱心網友回復：
對我來說，這是最好的方法：
<form id="myForm">
First name: <input type="text" name="fname" value="Demo"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>
uj5u.com熱心網友回復：
<script type="text/javascript">
function clearThis(target) {
if (target.value == '[email protected]') {
target.value = "";
}
}
</script>
這真的是你要找的嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/348700.html
標籤：javascript
上一篇：將元素按鈕更改為影像