如何修复我的清除按钮以删除数组

Question

I really need help with getting my button's onclick to clear. struggling to understand how I can clear the array names once they have been inputted. I've only recently been studying Javascript and my knowledge in Html is only mediocre.

 function Add() { //create a para obj var newPara = document.createElement("p"); //create the text content var input = document.getElementById("txtName").value; var newText = document.createTextNode(input); //attach the text to the para obj newPara.appendChild(newText); //attach the para obj to the div obj var myDiv = document.getElementById("result"); myDiv.appendChild(newPara); } function Clear() { var newPara = document.getElementById("tostring") input = "" newPara.value = 0; } function Count() { var arrPara = document.getElementById("result").childNodes; document.getElementById("result").removeChild(arrPara[Index.Count]); }

 <label>Name</label><input id="txtName" type="text" /><br /> <p id="displayNames"></p> <button onclick="Add()">Add</button> <!-- add the name to an array and display the name on the paragraph --> <button onclick="Clear()">Clear</button> <!-- clear the names in the array and clear the paragraph --> <button onclick="Count()">Count</button> <!-- count and display the number of times the name has been entered --> <div id="result"></div>

Answer 1

You can clear the value in side the add() .

Please Note: You do not have any element with #tostring in your HTML.

Change:

//create the text content
var input = document.getElementById("txtName").value;
var newText = document.createTextNode(input);

To:

//create the text content
var input = document.getElementById("txtName");
var newText = document.createTextNode(input.value);
input.value = ''; // clear the value

Answer 2

it will clear the input value, when you clicked on the button.

 function Add() { //create a para obj var newPara = document.createElement("p"); //create the text content var input = document.getElementById("txtName").value; var newText = document.createTextNode(input); //attach the text to the para obj newPara.appendChild(newText); //attach the para obj to the div obj var myDiv = document.getElementById("result"); myDiv.appendChild(newPara); document.getElementById('txtName').value = ''; } function Clear() { var newPara = document.getElementById("result") newPara.textContent = ''; console.log(newPara) newPara.value = 0; } function Count() { var arrPara = document.getElementById("result").childNodes; document.getElementById("result").removeChild(arrPara[Index.Count]); }

 <label>Name</label><input id="txtName" type="text" /><br /> <p id="displayNames"></p> <button onclick="Add()">Add</button> <!-- add the name to an array and display the name on the paragraph --> <button onclick="Clear()">Clear</button> <!-- clear the names in the array and clear the paragraph --> <button onclick="Count()">Count</button> <!-- count and display the number of times the name has been entered --> <div id="result"></div>

Thanks!

Answer 3

function Clear() {
 document.getElementById("result").textContent ="";
 document.getElementById("txtName").value ="";
}