Question

我有3个并行数组：水果，颜色，和形状

我希望每个水果都是一个按钮。当按下按钮时，水果的颜色和形状将显示在下面。我设法显示了按钮，但是在运行时，仅当按下按钮时才显示最后的颜色和形状作为警报。

这是我的代码：

var fruit = ["apples", "bananas", "oranges"];
var colour = ["red", "yellow", "orange"];
var shape = ["round", "long", "round"];

for(i = 0; i < fruit.length; i++) {
   holder = colour[i] + shape[i];
   document.getElementById("foo").innerHTML += "<button onclick='alert(" + 'holder' + ")'>" + fruit[i] + "</button>";

当将颜色和形状直接放入提醒而不是如图所示的支架时，它似乎不起作用：

document.getElementById("foo").innerHTML += "<button onclick='alert(" + 'colour[i] + shape[i]' + ")'>" + fruit[i] + "</button>";
//does not work

注意：数组要长得多，因此单独执行每个项目将不起作用。如果将颜色和形状显示在下面而不是显示在警报中，那会更好。

提前谢谢！

Answer 1

var fruit = ["apples", "bananas", "oranges"];
var colour = ["red", "yellow", "orange"];
var shape = ["round", "long", "round"];

for(i = 0; i < fruit.length; i++) {
   holder = colour[i] + shape[i];
   document.getElementById("foo").innerHTML +=
     '<button onclick="alert(\''+ holder + '\')">' + fruit[i] + '</button>';
   }

<div id="foo"></div>

您的问题是您的onclick构造不正确，并且正在使用holder作为变量，而不是将每次迭代所具有的文字字符串放入onclick警报调用中。修复onclick的构造后，它会使用构造时使用的文字值，而不是全局变量。

Answer 2

您在每次循环迭代中都覆盖全局holder变量。因此，在循环结束时，holder变量将保留迭代中的最后一个值，即。 orangeround。

您需要在创建时将值嵌入警报中，或引用正确的状态，例如：

"<button onclick='alert(\"" + holder + "\")'>" + fruit[i] + "</button>";

或创建一个可以引用的对象，即：

var fruit = ["apples", "bananas", "oranges"];
var colour = ["red", "yellow", "orange"];
var shape = ["round", "long", "round"];
var holder = {};
for(let i = 0; i < fruit.length; i++) {
   holder[i] = colour[i] + shape[i];
   document.getElementById("foo").innerHTML += "<button onclick='alert(" + 'holder['+i+']' + ")'>" + fruit[i] + "</button>";
}

数组中每个项目的按钮，每个项目都有不同的输出

2 个答案: