How to make onmouseover happen multiple times-CodePudding

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" onm ouseover="ColorEverySecond(id)" onm ouseout="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?

CodePudding user response：

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" onm ouseover="ColorEverySecond(id)" onm ouseout="stopColorEverySecond()">
    When you hover I should change colors every 500 milliseconds, but instead I just change everytime you hover.
  </h1>
</body>

</html>

CodePudding user response：

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" onm ouseover="ColorEverySecond(id)" onm ouseout="stopColorEverySecond()">
   When you hover I should change colors every 500 milliseconds, but instead I just change everytime you hover. 
  </h1>
</body>
</html>

CodePudding user response：

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" onm ouseover="ColorEverySecond(id)" onm ouseout="stopColorEverySecond()"> When you hover I  change colors every 500 milliseconds.
</h1> 
</body>
</html>

The Answer