Question

我无法弄清楚如何将JavaScript中的值传递给onClick-function。我一直在尝试关闭功能，但它似乎没有工作！ AAH

...

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。

请务必创建本地范围，并使用meal声明var。

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

Answer 2

这是因为当你运行on-click事件时，循环已完全执行，meal的值是静态的，作为最后一个计算值。如果需要为每个元素更改，则应将参数值传递给函数，而不是传递变量名称。如下所示：

"' onClick='addPrice('" + meal + "', 20)'></div>";

按值传递参数到onClick函数

2 个答案: