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

• 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

4 Answers 4

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