Background isn't changing every 1.5 seconds


#1

I’m trying to get the background color to change every 1.5 seconds. The colors are supposed to be randomly generated and appear on the body of the page. :sleepy:

javascript

window.onload = bgColor(){
  function bgColor(){
    var rgb1 = Math.floor(Math.random() * Math.floor(255));
    var rgb2 = Math.floor(Math.random() * Math.floor(255));
    var rgb3 = Math.floor(Math.random() * Math.floor(255));
    document.body.style.backgroundColor = "rgb(" + rgb1 + ', ' + rgb2 + ', ' + rgb3 + ')';
  }
  setInterval(bgColor, 1500);
}

html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Mortgage Calculator</title>
  <link rel="stylesheet" type="text/css" href="C:\\Users\\Brittany\\Documents\\randomProjectsCoding\\mortgageCalculator.css">
  <script src="C:\\Users\\Brittany\\Documents\\randomProjectsCoding\\mortgageCalculator.js" type="text/javascript"></script>
</head>
<body>
  <form>
    <h1>Mortgage Calculator</h1>
    <label for="homeValue">Mortgage Amount: </label><input id="homeValue" type="text"><label for="homeValue"> $</label>
    <br>
    <br>
    <label for="iR">Interest Rate: </label><input id="iR" type="text"><label for="iR"> $</label>
</body>

#2

from the docs:

window.onload = funcRef;

funcRef is the handler function to be called when the window’s load event fires.

its the same as you used earlier:

document.getElementById("submit").addEventListener("click", calculate);

you just specify the function you would like to call, in this case that would be bgColor.

you shouldn’t define the function at the onload event.