javascript - How do I repeat function with onclick? - Stack Overflow

admin管理员组

文章数量:1429926

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>

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>

I am currently using location.reload() since repeating function with onclick doesn't work. I am making a random color picker. When I click the button, I want the and to change. But this only works once. How can I repeat function with onclick?

• javascript

Share Improve this question Follow edited Nov 7, 2017 at 4:29 JLRishe 102k1919 gold badges137137 silver badges171171 bronze badges asked Nov 7, 2017 at 4:25 Yerim KangYerim Kang 31111 gold badge44 silver badges1111 bronze badges 3

• I want the and to change. what does this mean ? Can you please clearly state the problem statement – brk Commented Nov 7, 2017 at 4:27
• just wrap that js code in a function and call the function in onclick, like onclick=changeColor(); – Sudhir Bastakoti Commented Nov 7, 2017 at 4:29
• I want the para and bg to change Sorry I typed wrong – Yerim Kang Commented Nov 7, 2017 at 4:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Simple wrap your code in a function and call it on onclick something like

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>

Put this inside of function and call it in onclick button.

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;

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

    #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="reload()">Again</button>
    </div>

You need to make the code into an actual function which can be called over and over.

Make sure to run it once yourself to set the initial random color.

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();

#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="randomColor()">Again</button>
    </div>

chenge in html

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

change in 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();

本文标签： javascriptHow do I repeat function with onclickStack Overflow