CODEWITHSUNDEEP
javascripthtml
Mother Thief
Mother Thief

Reputation: 37

How to make onmouseover happen multiple times

var color2;
var color3;
var color1;
var interval;
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function ColorEverySecond(id){
interval = setInterval(changeColor(id),500);

}
function stopColorEverySecond(){
    clearInterval(interval)
}
 function changeColor(id){
color1 = getRandomInt(255);
color2 = getRandomInt(255);
color3 = getRandomInt(255);
document.getElementById(id).style = "color: rgb(" + color1 + ", " + color2 + ", " + color3 + ")";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id = "rainbow" onmouseover="ColorEverySecond(id)" onmouseout="stopColorEverySecond()">
 When you hover I should change colors every 500 milliseconds, but instead I just change everytime you hover. 
</h1>
</body>
</html>

For some reason it won't change color every 500 milliseconds and instead only changes once when you hover. I noticed that it only activates the function 'changeColor' once in the interval and then it stops.

I tried to replicate solutions from this post but they did not work for me. I think it has to with the 'changeColor' function but I do not see the problem. How do I fix it?

Upvotes: 0

Views: 44

Answers (3)

Mother Thief
Mother Thief

Reputation: 37

var color2;
var color3;
var color1;
var interval;
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function ColorEverySecond(id){
interval = setInterval(changeColor,500,id);

}
function stopColorEverySecond(){
    clearInterval(interval)
}
 function changeColor(id){
color1 = getRandomInt(255);
color2 = getRandomInt(255);
color3 = getRandomInt(255);
document.getElementById(id).style = "color: rgb(" + color1 + ", " + color2 + ", " + color3 + ")";
}
<!DOCTYPE html> <html>
<head> 
</head> <body> 
<h1 id = "rainbow" onmouseover="ColorEverySecond(id)" onmouseout="stopColorEverySecond()"> When you hover I  change colors every 500 milliseconds.
</h1> 
</body>
</html>

The Answer

Upvotes: 0

Asif Jalil
Asif Jalil

Reputation: 762

You faced this problem because of setInterval. setInterval receives a callback. But directly call the changeColor function. As you have to call the changeColor function here that's why you have to use a callback here. Hope you understand.

var color2;
var color3;
var color1;
var interval;
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function ColorEverySecond(id){
interval = setInterval(()=> changeColor(id), 500);

}
function stopColorEverySecond(){
    clearInterval(interval)
}
 function changeColor(id){
color1 = getRandomInt(255);
color2 = getRandomInt(255);
color3 = getRandomInt(255);
document.getElementById(id).style = "color: rgb(" + color1 + ", " + color2 + ", " + color3 + ")";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1 id = "rainbow" onmouseover="ColorEverySecond(id)" onmouseout="stopColorEverySecond()">
   When you hover I should change colors every 500 milliseconds, but instead I just change everytime you hover. 
  </h1>
</body>
</html>

Upvotes: 1

IT goldman
IT goldman

Reputation: 19495

You are calling the function instead of passing it as argument for the setInterval. Use this syntax:

var color2;
var color3;
var color1;
var interval;

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function ColorEverySecond(id) {
  interval = setInterval(function() {
    changeColor(id)
  }, 500);
  
  // also right away
  changeColor(id)

}

function stopColorEverySecond() {
  clearInterval(interval)
}

function changeColor(id) {
  color1 = getRandomInt(255);
  color2 = getRandomInt(255);
  color3 = getRandomInt(255);
  document.getElementById(id).style = "color: rgb(" + color1 + ", " + color2 + ", " + color3 + ")";
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1 id="rainbow" onmouseover="ColorEverySecond(id)" onmouseout="stopColorEverySecond()">
    When you hover I should change colors every 500 milliseconds, but instead I just change everytime you hover.
  </h1>
</body>

</html>

Upvotes: 3

Related Questions