javascript - 在 For 循环中使用选定的选项值

Question

下午好。

我正在尝试在 for 循环中使用选项框中的选定值。

理论是，例如，如果用户选择 3，Javascript 将用数组中的水果填充 3 个盒子。

谁能指出我正确的方向？我也附上了 Codepen 链接。

function changeText(){
    var e = document.getElementById('selectbox');
    var strUser = e.options[e.selectedIndex].value;
    for (var i=0; i<=strUser; i++) {
    document.getElementById('boldStuff').innerHTML = randomFruit + strUser;
    }

}

http://codepen.io/jameswinfield/pen/aNWRKm

Answer 1

ID元素对于整个dom应该是唯一的。您在 boldStuff 中多次使用它。如果您希望能够像那样捕获它们，您应该使用一个类。

这是一个应该做你想做的版本:http://codepen.io/anon/pen/KzmGLP?editors=0010

请记住，为每个框设置值，即使是隐藏的框。您必须在每个盒子中随机获得一个新水果，否则它们都会有相同的水果。

我把所有的 id="boldStuff" 都改成了 class="boldStuff",

捕获了所有 boldStuffs var boldStuffs = document.getElementsByClassName('boldStuff');

并遍历每一个 boldStuff

for (var i = 0; i < boldStuffs.length; i += 1) {  
    //And set the value of each boldStuff to a new random fruit.  
    boldStuffs[i].innerHTML = getRandomItem(fruitsArray);  
}  

下面这行也只运行一次，所以无论有多少个盒子，它们都会有相同的水果(因为 randomFruit 永远不会改变)

var randomFruit = fruitsArray[Math.floor(Math.random() * fruitsArray.length)];

你可以使用一个函数来代替随机水果，像这样:

function getRandomItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

然后使用 getRandomItem(fruitsArray); 得到一个随机水果。