Input element not finding its value

Question

function makeUL() {

var products = JSON.parse(localStorage["products"]);

var list = document.createElement('ul');

for(var i = 0; i < products.length; i++) {
    if(products[i].amount == 0) {
        continue;
    }
    // Create the list item:
    var item = document.createElement('li');

    var product = products[i];

    var totalPrice = product.amount * product.price;
    var toDisplay = product.name + " " + product.amount + " @" + totalPrice + " ";

    // Set its contents:
    item.appendChild(document.createTextNode(toDisplay));
    var inputbox = document.createElement("input");
    inputbox.setAttribute("id", "inputboxProduct" + i);
    inputbox.addEventListener("change", function(){
        changeAmountProd(inputbox.id);
    });
    item.appendChild(inputbox);

    // Add it to the list:
    list.appendChild(item);
}

// Finally, return the constructed list:
return list;
}

This will basically make a list when you hover over a certain string. The list will be based on the localstorage and make an inputbox for each point of that list. The problem is the adding of eventlisteners. For some reason it always returns an empty value when the event is triggered of that inputbox.

function changeAmountProd(inputboxId) {
var products = JSON.parse(localStorage["products"]);

value = document.getElementById(inputboxId).value;

if(value < 1) {
    return;
}
products[i].amount = value;

localStorage["products"] = JSON.stringify(products);

makeUL();
}

If you could provide a JSFiddle for this, it would be much easier to debug. — Sid
– Sid, Commented Jan 21, 2015 at 8:55

haim770 · Accepted Answer · 2017-01-09 11:09:43Z

2

The problem is with the callback of your change event. You're referring to the changed element using the inputbox variable (that is available through the closure) but by the time your callback is invoked, inputbox will always point to the last generated element.

Try this instead:

inputbox.addEventListener("change", function(){
    changeAmountProd(this.id);
});

See addEventListener

edited Jan 9, 2017 at 11:09

answered Jan 21, 2015 at 9:00

haim770

49.2k7 gold badges112 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michał Szepielak · Accepted Answer · 2015-01-21 08:59:20Z

Try this:

function makeUL() {

    var products = JSON.parse(localStorage["products"]);

    var list = document.createElement('ul');

    for(var i = 0; i < products.length; i++) {
        if(products[i].amount == 0) {
            continue;
        }
        // Create the list item:
        var item = document.createElement('li');

        var product = products[i];

        var totalPrice = product.amount * product.price;
        var toDisplay = product.name + " " + product.amount + " @" + totalPrice + " ";

        // Set its contents:
        item.appendChild(document.createTextNode(toDisplay));
        var inputbox = document.createElement("input");
        inputbox.setAttribute("id", "inputboxProduct" + i);
        inputbox.addEventListener("change", function(){
            changeAmountProd(this.id);
        });
        item.appendChild(inputbox);

        // Add it to the list:
        list.appendChild(item);
    }

// Finally, return the constructed list:
    return list;
}

Yea, I see my error. Thanks a lot! Ill accept when I'm allowed to accept your answer :)
You should accept @haim770 answer - he wrote an explanation. I've just posted code snippet faster then him :)

Collectives™ on Stack Overflow

Input element not finding its value

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related