javascript - 按值将参数传递给 onClick 函数

Question

我不知道如何在 JavaScript 中按值将参数传递给 onClick 函数。我一直在尝试使用闭包函数，但它似乎不起作用!!啊啊

...

for(var i=0; i<=15; i++){
    blockNr++;
    meal = getMealByCategory(category, i);
    place.innerHTML += "<div class='container-fluid' name='blockName' id='blockName" +
    blockNr + "' onClick='addPrice(meal, 20)'></div>"; //here, always the last meal is sent

    var itemPlace = document.getElementById("blockName"+blockNr);
    itemPlace.innerHTML = meal; //this works fine for all meals
}

Answer 1

您正在做的是创建一个全局变量并在每次添加到 .innerHTML 时覆盖它。字符串中的代码不能引用局部变量，所以你想要的是不可能的。

一种选择是将值连接到字符串中。

place.innerHTML += "<div class='container-fluid' name='blockName' id='blockName" +
blockNr + "' onClick='addPrice(\"" + meal + "\", 20)'></div>";

---

这应该可行，但非常不愉快。相反，使用 DOM 创建方法创建元素，并将函数分配给 onclick 属性。该函数将能够引用本地 meal。

并且一定要创建一个本地作用域，并使用 var 声明 meal。

var meal; 

for(var i=0; i<=15; i++) {
    meal = getMealByCategory(category, i);
    createDiv(meal);
}

function createDiv(meal) {
    blockNr++;
    var div = document.createElement("div");
    div.className = "container-fluid"
    div.name = "blockName"
    div.id = "blockName" + blockNr;
    div.onclick = function() {
        addPrice(meal, 20);
    }
    place.appendChild(div);
}