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>

Answer 2

在html中改变

<button id="button" onclick="myfunction()">Again</button>

更改javascript

function myfunction()
{
        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;
}
myfunction();

Answer 3

将其放入函数内部并在onclick按钮中调用它。

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;

＆＃13;

    function reload(){
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;}

＆＃13;

    #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; }

＆＃13;

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

＆＃13;

Answer 4

您需要将代码转换为可以反复调用的实际函数。

确保自己运行一次以设置初始随机颜色。

＆＃13;

function randomColor() {
    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;
}
randomColor();

＆＃13;

#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; }

＆＃13;

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

＆＃13;

如何使用onclick重复功能？

4 个答案: