点击按钮始终返回数组最后一个元素，如何实现随机选取数组元素？

嘿，我一眼就发现问题出在哪啦！

你现在的代码里，生成随机元素的那行var letter = letters[Math.floor(Math.random()*letters.length)]，是在页面刚加载的时候就执行了——也就是说，它只会计算一次随机值，之后这个letter就固定下来了。不管你点多少次按钮，都只是把这个早就确定好的值塞给quoteDisplay，你觉得每次都是最后一个元素，大概率是页面加载那次随机刚好选中了数组最后一项，之后就一直用这个值了。

修复方法：把随机逻辑移到点击事件里 #

只要把生成随机元素的代码放进按钮的点击回调函数内部，这样每次点击按钮时都会重新计算一次随机值，自然就能实现每次点击都返回不同的随机元素了。修改后的代码如下：

var letters = ["a", "b", "c", "d", "e", "f", "1", "4", "9"] 
random.addEventListener("click", function(){ 
    // 每次点击才生成新的随机元素
    var letter = letters[Math.floor(Math.random()*letters.length)] 
    quoteDisplay.textContent = letter 
})

额外小优化 #

如果不想每次都声明letter变量，也可以直接把计算逻辑写在赋值语句里，代码会更简洁：

var letters = ["a", "b", "c", "d", "e", "f", "1", "4", "9"] 
random.addEventListener("click", function(){ 
    quoteDisplay.textContent = letters[Math.floor(Math.random()*letters.length)] 
})

这样写效果完全一样，还少了一个临时变量~

内容的提问来源于stack exchange，提问作者Jesse