CODEWITHSUNDEEP
javascripthtml
grhu
grhu

Reputation: 470

Clearing input value after adding content

I have a simple script that adds an 'li' element with input text value to the list after clicking a button, but I also want to clear this input after clicking the button. Here is the 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>

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

Commands are fine, I've tested it in console and inputing first

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

And then

itemText.innerText = "";

Works just fine, but I cannot get it to work on click event. What am I doing wrong?

Upvotes: 0

Views: 1570

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65808

Your problem was that you were setting your variable to the value of the textbox, rather than the textbox itself:

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

This meant that the next line was attempting to set the innerText of the value, which doesn't work. Also, to set or get data to or from an input field, you use the value property. Input fields don't have innerHTML or innerText. In fact, innerText is not even a standard. In places where that makes sense, use textContent instead.

It's always better to set variables to reference DOM elements themselves instead of particular properties of the element. That way, you can access the element and get whatever you need, as often as you need to, without having to re-scan the DOM for the element again when a different property value is needed.

Here's the working code:

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>

Upvotes: 6

Related Questions