添加内容后清除输入值

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 = "";

工作得很好，但我无法让它在点击事件上工作。我究竟做错了什么？

Answer 1

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

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

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

设置变量以引用 DOM 元素本身而不是元​​素的特定属性总是更好。这样，您就可以访问该元素并获得所需的任何内容，只要您需要，无需在需要不同的属性值时再次重新扫描 DOM 以查找该元素。

这是工作代码：

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

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);