javascript - 输入元素找不到它的值

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

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

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

Answer 1

问题出在您的change 事件的回调上。您指的是使用 inputbox 变量(可通过 closure 获得)更改的元素，但在调用回调时，inputbox 将始终指向最后生成的元素。

试试这个:

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

参见 addEventListener