javascript - 如何使用 onclick 重复功能？

Question

var color = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," +  Math.floor(Math.random() * 256) + ")";
document.getElementById("name").innerHTML = color;
document.getElementById("bg").style.backgroundColor = color;

#bg { width: 90px; height: 45px; margin: auto; }
.box { border: 1px solid black; padding: 50px; width: 300px; height: 300px; margin: 22vh auto; text-align: center; font-size: 30px; }
button { width: 90px; height: 45px; }

<div class="box">
  <p id="name"></p>
  <div id="bg"></div>
  <br>
  <button id="button" onclick="location.reload()">Again</button>
</div>

我目前正在使用 location.reload() 因为 onclick 的重复功能不起作用。我正在制作一个随机颜色选择器。当我单击按钮时，我希望 和 发生变化。但这仅有效一次。如何使用 onclick 重复功能？

Answer 1

简单地将代码包装在一个函数中，然后在 onclick 上调用它，例如

function changeColor(){
    var color = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," +  Math.floor(Math.random() * 256) + ")";
    document.getElementById("name").innerHTML = color;
    document.getElementById("bg").style.backgroundColor = color;
}

changeColor();

 #bg { width: 90px; height: 45px; margin: auto; }
.box { border: 1px solid black; padding: 50px; width: 300px; height: 300px; margin: 22vh auto; text-align: center; font-size: 30px; }
button { width: 90px; height: 45px; }

<div class="box">
    <p id="name"></p>
    <div id="bg"></div>
    <br>
    <button id="button" onclick="changeColor()">Again</button>
</div>