编写允许用户键入添加到有序列表中的文本的Javascript代码。创建两个按钮(添加项目并删除最后一个),允许用户在按下时添加项目或删除最后添加的项目。
应该有一个可选的“ Delete#”按钮,然后是一个文本输入。这将删除用户输入的项目#。
另外,如果用户单击“输入要添加的项目”下的文本输入,则应删除可能已经存在的所有现有文本值。
问题是,当我手动运行诸如add()之类的函数时,我的代码可以正常工作;在控制台上。但是当我输入remove()的那一刻;除非我在控制台中手动调用js文件中的功能,否则添加按钮将不起作用。删除按钮有相同的问题。
window.onload = function() {
var button = document.getElementById("add");
var button1 = document.getElementById("delete");
var button2 = document.getElementById("deleteItem");
var input = document.getElementById("input");
button.onclick = add;
button.onclick = remove;
button.onclick = specific;
input.onclick = clearText;
}
function clearText() {
this.value = "";
}
function add() {
var input = document.getElementById("input");
var output = document.getElementById("list");
if (input.value != "") {
var li = document.createElement("li");
li.innerHTML = input.value;
output.appendChild(li);
}
}
function remove() {
var list = document.getElementById("list");
var allLi = list.getElementsByTagName("li")
if (allLi.length > 0) {
list.removeChild(allLi[allLi.length - 1]);
}
}
ol {
width: 200px;
height: 200px;
background-color: silver;
border: 1px solid black;
overflow: auto;
}
<h1> Todo List++ </h1>
<p> Enter item to add: <br> <input id="input" type="text"> </p>
<button id="add"> Add item </button>
<button id="delete"> Delete </button>
<button id="deleteItem"> DeleteItem# </button>
<input type="text" id="item" style="width:30px;"> <br>
<!-- You need to add in the buttons -->
<!-- it is OK if your HTML looks slightly different than the one in the PDF -->
<!-- as long as your code can perform the same function -->
<ol id="list"> </ol>
最佳答案
您要将所有点击事件附加到同一按钮上,应为:
window.onload = function() {
var button = document.getElementById("add");
var button1 = document.getElementById("delete");
var button2 = document.getElementById("deleteItem");
var input = document.getElementById("input");
button.onclick = add;
button1.onclick = remove;
button2.onclick = specific;
input.onclick = clearText;
}
希望这可以帮助。
window.onload = function() {
var button = document.getElementById("add");
var button1 = document.getElementById("delete");
var button2 = document.getElementById("deleteItem");
var input = document.getElementById("input");
button.onclick = add;
button1.onclick = remove;
button2.onclick = specific;
input.onclick = clearText;
}
function clearText() {
this.value = "";
}
function specific() {
console.log('specific');
}
function add() {
var input = document.getElementById("input");
var output = document.getElementById("list");
if (input.value != "") {
var li = document.createElement("li");
li.innerHTML = input.value;
output.appendChild(li);
}
}
function remove() {
var list = document.getElementById("list");
var allLi = list.getElementsByTagName("li")
if (allLi.length > 0) {
list.removeChild(allLi[allLi.length - 1]);
}
}
{
width: 200px;
height: 200px;
background-color: silver;
border: 1px solid black;
overflow: auto;
}
<h1> Todo List++ </h1>
<p> Enter item to add: <br> <input id="input" type="text"> </p>
<button id="add"> Add item </button>
<button id="delete"> Delete </button>
<button id="deleteItem"> DeleteItem# </button>
<input type="text" id="item" style="width:30px;"> <br>
<!-- You need to add in the buttons -->
<!-- it is OK if your HTML looks slightly different than the one in the PDF -->
<!-- as long as your code can perform the same function -->
<ol id="list"> </ol>
关于javascript - JS DOM-添加/删除按钮不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47507669/