Why does my code only add "null" to my shopping lists?

Question

I think the intention is clear: Either you press one button or the other to add the item you typed into the input-field to one or the other shopping list.

However, no matter what or if I write something at all, if I press one of the buttons, it will just add "null" to the list.

Why is that?

function sortItem1() {
    document.getElementById("addToMarket").addEventListener("click", addToMarketList);
}

function sortItem2() {
    document.getElementById("addToOnline").addEventListener("click", addToOnlineList);
}

var gottaBuy = document.getElementById("item");
var listForMarket = " ";
var listForOnlineShop = " ";

function addToMarketList() {
    listForMarket = listForMarket + "<li>" + gottaBuy + "</li>";
    document.getElementById("marketList").innerHTML = listForMarket;
    document.getElementById("item").value = " ";
}

function addToOnlineList() {
    listForOnlineShop = listForOnlineShop + "<li>" + gottaBuy + "</li>"
    document.getElementById("onlineList").innerHTML = listForOnlineShop;
    document.getElementById("item").value = " ";
}

window.addEventListener("load", sortItem1);
window.addEventListener("load", sortItem2);

<h1>What would you like to add?</h1> 
 <input type="text" id="item" /> 
 <button type="button" id="addToMarket">Markt</button> 
 <button type="button" id="addToOnline">Online</button> 
 <h2>Buy at a store:</h2> 
 <ul id="marketList"></ul> 
 <h2>Buy online:</h2> 
 <ul id="onlineList"></ul>

`gottabuy` is a HTML element, initialized possibly before the DOM is rendered. Don't you want the *value* of the text input? Just get the element and its value in the click handler. — Dave Newton, May 19 '18 at 21:08
@DaveNewton, yes, I definitly need the value... I just don't know how to get it. If i type "var gottaBuy = document.getElementById("item").value;" nothing happens anymore, not even "null". How can I get the value in the click handler? Can you give me an example, please? — Nat_, May 19 '18 at 21:13
@Nat_ Then you're doing something else wrong; https://stackoverflow.com/a/11563667/438992 — Dave Newton, May 19 '18 at 21:14

AndrewL64 · Accepted Answer · 2018-05-19T21:21:59.907

The line var gottaBuy = document.getElementById("item") just assigns the html tag of the input to the variable.

What you want to retrieve is the value of the input and assigning it based on the button clicked. You can do that by assigning a separate variable within each button handlers and appending .value to get the input value like this:

function addToMarketList() {
    var gottaBuy = document.getElementById("item").value;
    listForMarket = listForMarket + "<li>" + gottaBuy + "</li>";
    document.getElementById("marketList").innerHTML = listForMarket;
    document.getElementById("item").value = " ";
}

function addToOnlineList() {
    var gottaBuy = document.getElementById("item").value;
    listForOnlineShop = listForOnlineShop + "<li>" + gottaBuy + "</li>"
    document.getElementById("onlineList").innerHTML = listForOnlineShop;
    document.getElementById("item").value = " ";
}

jsFiddle: https://jsfiddle.net/AndrewL64/e9t0rszh/1/

score 1 · Answer 2 · answered May 19 '18 at 21:15

You could select the element from inside the click handlers, so you are sure it is already loaded.

And you also most likely want to add the actual value and not the element itself.

function addToMarketList() {
    var gottaBuy = document.getElementById("item");
    listForMarket = listForMarket + "<li>" + gottaBuy.value + "</li>";
    document.getElementById("marketList").innerHTML = listForMarket;
    document.getElementById("item").value = " ";
}

function addToOnlineList() {
   var gottaBuy = document.getElementById("item"); 
   listForOnlineShop = listForOnlineShop + "<li>" + gottaBuy.value + "</li>"
    document.getElementById("onlineList").innerHTML = listForOnlineShop;
    document.getElementById("item").value = " ";
}

Why does my code only add "null" to my shopping lists?

2 Answers2