输入元素找不到其值

Input element not finding its value

本文关键字：找不到 元素 输入      更新时间：2023-09-26
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();
}

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

试试这个：

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

请参阅 addEventListener

试试这个：

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;
}
相关文章：