Question

我有一个简单的脚本，在单击按钮后将带有输入文本值的'li'元素添加到列表中，但我也希望在单击按钮后清除此输入。这是HTML：

<form class="form">
<input id="newInput" type="text" placeholder="Dodaj pozycję">
<button id="createNew" type="button">Dodaj</button>
</form>
<h2>Moja lista:</h2>
<div class="listBg">
<ul id="list">
</ul>
</div>
<button id="deleteAll" type="button">Wyczyść</button>

和JS：

function addItem(){
    var myList = document.getElementById("list");
    var newListItem = document.createElement("li");
    var itemText = document.getElementById("newInput").value;
    var listText = document.createTextNode(itemText);
    newListItem.appendChild(listText);
    if (itemText === "") {
        alert("Pole nie może być puste");
    } else {
        myList.appendChild(newListItem);
    }
};

function clearText(){
    var itemText = document.getElementById("newInput").value;
    itemText.innerText = "";
};

var addButton = document.getElementById("createNew");
addButton.addEventListener("click", function(){
    addItem(); 
    clearText();
});

function clearList(){
    var myList = document.getElementById("list");
    myList.innerHTML = "";
};

var deleteButton = document.getElementById("deleteAll");
deleteButton.addEventListener("click", clearList);

命令很好，我已在控制台中测试并先输入

var itemText = document.getElementById("newInput").value;

然后

itemText.innerText = "";

工作正常，但我不能让它在click事件上工作。我做错了什么？

Answer 1

您的问题是您将变量设置为文本框的value，而不是文本框本身：

function clearText(){
    var itemText = document.getElementById("newInput").value;  // <----
    itemText.innerText = "";
};

这意味着下一行试图设置innerText的{{1}}，这不起作用。此外，要在输入字段中设置数据或从输入字段获取数据，请使用value属性。输入字段没有value或innerHTML。事实上，innerText甚至不是标准。在有意义的地方，请改用innerText。

将变量设置为引用DOM元素本身而不是元素的特定属性总是更好。这样，您可以根据需要随时访问元素并获取所需内容，而无需在需要不同属性值时再次针对元素重新扫描DOM。

这是工作代码：

textContent

function addItem(){
    var myList = document.getElementById("list");
    var newListItem = document.createElement("li");
    var itemText = document.getElementById("newInput").value;
    var listText = document.createTextNode(itemText);
    newListItem.appendChild(listText);
    if (itemText === "") {
        alert("Pole nie może być puste");
    } else {
        myList.appendChild(newListItem);
    }
};

function clearText(){
    // Just set your variable to the input element, not its value
    var itemText = document.getElementById("newInput");
    itemText.value = "";  // Form elements have a value property
};

var addButton = document.getElementById("createNew");
addButton.addEventListener("click", function(){
    addItem(); 
    clearText();
});

function clearList(){
    var myList = document.getElementById("list");
    myList.innerHTML = "";
};

var deleteButton = document.getElementById("deleteAll");
deleteButton.addEventListener("click", clearList);

添加内容后清除输入值

1 个答案: