时间戳

首页 > 解决方案 > 数组中每个项目的按钮和每个项目的不同输出

javascript - 数组中每个项目的按钮和每个项目的不同输出

问题描述

我有 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

注意：数组要长得多，所以单独做每个项目是行不通的。此外，如果颜色和形状显示在下方而不是警报中会更好。

提前致谢！

标签： javascripthtmlarrays

解决方案

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 的构造使其使用构造它的文字值，而不是全局变量。

推荐阅读