HTML onclick 只对 JavaScript 起作用一次

Question

如上所述。这是我尝试使用的代码类型的示例：

<button id='myButt' onclick='randGen()'>New Target</button>
<button id="myOtherButt" onclick='clear()'>Clear</button>

<p id='test'>Click me to randomly choose from the array!</p>

然后是JS；

var myArray = ["Empire", "Rebels", "Scum", "Clones", "Trade Federation", "Sith", "Jedi"];
var rand = myArray[Math.floor(Math.random() * myArray.length)];

function randGen() {
  document.getElementById('test').innerHTML = rand;
}; 

function clear() {
  document.getElementById('test').innerHTML = 'No';
};

它一次运行良好，但 'clear' 或多次尝试使用“第一个”按钮时没有响应。有人可以帮助我了解我做错了什么吗？

Answer 1

您已经在页面加载时生成了一次随机数并且它永远不会改变。为了改变它，您需要在点击时再次生成它：

var myArray = ["Empire", "Rebels", "Scum", "Clones", "Trade Federation", "Sith", "Jedi"];

function randGen() {
    var rand = myArray[Math.floor(Math.random() * myArray.length)];
    document.getElementById('test').innerHTML = rand;
};

Answer 2

您调用的 rand 只是一个一次性生成的变量。

如果你想得到另一个随机物品，你应该使用 returns 结果的函数：

function rand() {
    var myArray = ["Empire", "Rebels", "Scum", "Clones", "Trade Federation", "Sith", "Jedi"];
    return myArray[Math.floor(Math.random() * myArray.length)];
}
function randGen() {
  document.getElementById('test').innerHTML = rand();
}; 

function clear() {
  document.getElementById('test').innerHTML = 'No';
};

Answer 3

这里的问题是你只在开始时初始化属性 "rand"。所以每次调用函数 "randGen()" 时 "rand" 属性使用相同的值。

要始终获得新值，您还必须将 rand 设置为新值。

解决方法就是这么简单：

function randGen() {
  // get a new value
  var rand = myArray[Math.floor(Math.random() * myArray.length)];

  // set the value
  document.getElementById('test').innerHTML = rand;
};

HTML onclick 只对 JavaScript 起作用一次

HTML onclick only working once with JavaScript

html

javascript

onclick