Right now I'm trying to develop a very simple button that changes the background color of the whole webpage. Here is the code I have
var mybutton = document.querySelector('button');
var myBack = document.querySelector("body");
var isRand = false;
var ranNumber1 = Math.floor(Math.random() * 256);
var ranNumber2 = Math.floor(Math.random() * 256);
var ranNumber3 = Math.floor(Math.random() * 256);
var RanRGB = "rgb(" + ranNumber1 + "," + ranNumber2 + "," + ranNumber3 + ")";
mybutton.addEventListener("click", function() {
if (isRand) {
myBack.style.backgroundColor = "white";
isRand = false;
} else {
myBack.style.backgroundColor = RanRGB
isRand = true;
}
});
<!DOCTYPE html>
<html>
<head>
<title>toggle</title>
</head>
<body>
<div>
<button>click here!</button>
</div>
<script type="text/javascript" src="togglescript.js"></script>
</body>
</html>
When this webpage loads and I click the button, the background color changes to a random color from white. Then if i click again it turn white again. This is what I want. However, then I want to be able to click the button again and change the color to a new random color. Currently it just changes it background back to the color it generated originally. How do I reset the background color?
Aucun commentaire:
Enregistrer un commentaire