Javascript 输入元素找不到其值

当您将鼠标悬停在某个字符串上时，这将基本上形成一个列表。该列表将基于本地存储，并为该列表的每个点创建一个输入框。 问题在于添加eventlisteners。由于某些原因，当该inputbox的事件被触发时，它总是返回空值

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

试试这个：

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

试试这个：

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

---

问题在于更改事件的回调。您正在使用可通过调用的inputbox变量引用已更改的元素，但在调用回调时，inputbox将始终指向最后生成的元素

请尝试以下方法：

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

---

请参见

问题在于更改事件的回调。您正在使用可通过调用的inputbox变量引用已更改的元素，但在调用回调时，inputbox将始终指向最后生成的元素

请尝试以下方法：

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

---

请参见

如果您可以为此提供一个JSFIDLE，那么调试就会容易得多。如果您可以为此提供一个JSFIDLE，那么调试就会容易得多。是的，我看到了我的错误。谢谢！当我被允许接受你的答案时，我会接受的：你应该接受@haim770的答案——他写了一个解释。我刚刚比他更快地发布了代码片段：是的，我看到了我的错误。谢谢！当我被允许接受你的答案时，我会接受的：你应该接受@haim770的答案——他写了一个解释。我刚刚比他更快地发布了代码片段：