添加內容後清除輸入值

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

工作得很好，但我無法得到它的工作k點擊事件。我究竟做錯了什麼？

Answer 1

你的問題是，你是你的變量設置爲文本框的value，而不是文本框本身：

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

這意味着下一行正試圖設置value的innerText，這不起作用。此外，要設置數據或從輸入字段獲取數據，請使用value屬性。輸入字段沒有innerHTML或innerText。實際上，innerText甚至不是一個標準。在有意義的地方，請改用textContent。

將變量設置爲引用DOM元素本身而不是元​​素的特定屬性總是更好。這樣，您可以隨時訪問元素並獲得所需的任何內容，而無需在需要不同屬性值時再次重新掃描元素的DOM。

這裏的工作代碼：

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

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