HTML/JS新手求助：按钮点击无法重复生成随机单词的解决方法

嘿，我明白你遇到的小麻烦啦！咱们先揪出问题根源：你现在的代码里，randomSong变量是在页面刚加载时就计算好的固定值，所以不管你点多少次按钮，它都不会变，自然出不来新内容。

核心解决方案：把随机生成逻辑移到点击函数里 #

只要把生成随机元素的代码放到myFunction内部，每次点击按钮时都会重新计算随机值，就能得到新的单词/句子啦。修改后的完整代码如下：

<button onclick="myFunction();">Moet er een atje worden gedaan? </button>
<p id="demo"></p>

<script>
function myFunction() {
  // 每次点击都重新生成随机歌曲
  const songs = ["song1", "song2", "song3", "song4", "song5", "song6"];
  const randomSong = songs[Math.floor(Math.random() * songs.length)];
  document.getElementById("demo").innerHTML = randomSong;
}
</script>

新手友好的小优化 #

如果你的歌曲列表比较长，可以把数组放到函数外面（但生成随机索引的逻辑必须留在函数里），这样不用每次点击都重新创建数组，效率更高一点：

<button onclick="myFunction();">Moet er een atje worden gedaan? </button>
<p id="demo"></p>

<script>
// 数组只在页面加载时创建一次
const songs = ["song1", "song2", "song3", "song4", "song5", "song6"];

function myFunction() {
  // 每次点击都重新计算随机索引
  const randomIndex = Math.floor(Math.random() * songs.length);
  document.getElementById("demo").innerHTML = songs[randomIndex];
}
</script>

这样调整后，你每次点击按钮都会得到一个新的随机内容，刷新页面后也能正常工作啦！

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