CODEWITHSUNDEEP
javascript
Yerim Kang
Yerim Kang

Reputation: 311

How do I repeat function with 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;
#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?

Upvotes: 0

Views: 6481

Answers (4)

jitender
jitender

Reputation: 10429

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>

Upvotes: 1

Hemant Rajpoot
Hemant Rajpoot

Reputation: 690

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

Upvotes: 1

SamVK
SamVK

Reputation: 3405

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>

Upvotes: 1

JJJJ
JJJJ

Reputation: 1358

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>

Upvotes: 1

Related Questions