The following function changes background-color with random colors clicking on a start button. The event ends clicking on a stop button, but actually I would rather prefer to stop it automatically after few seconds.
I tried with a setTimeout() but due to my JS low level knowledge I'm far from the solution.
Thanks to anyone will be so kind to help me.
function setColor(randomColor){
var body = document.body;
body.style.backgroundColor=randomColor;
var span = document.querySelector(".color");
span.innerText = "\t"+randomColor;
}
function changeColor(){
var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
setColor(randomColor);
}
const stopDisco = () => {
var btn = document.querySelector("button");
// btn.setAttribute("class", "on");
setColor("#ffffff");
}
function startDisco(){
var btn = document.querySelector("button");
// var btnClass = btn.getAttribute("class");
changeColor();
let interval = setInterval(changeColor, 50);
var stopBtn = document.querySelector(".stop")
stopBtn.addEventListener('click', function () {
clearInterval(interval);
stopDisco();
})
}<body>
<div>
<button class="on" onclick="startDisco()">Start Disco</button>
<button class="stop">Stop Disco</button>
<p>Hex Color:<span class ="color">#FFFFFF</span></p>
</div>
</body>Here is an improved version
I use setTimeout to stop after x seconds
Also I define the various buttons and other elements once
const start = document.getElementById("start");
const stop = document.getElementById("stop");
const body = document.body;
const span = document.querySelector(".color");
let interval;
function setColor(randomColor) {
body.style.backgroundColor = randomColor;
span.innerText = randomColor; // a tab is not useful here
}
function changeColor() {
var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
setColor(randomColor);
}
const stopDisco = () => {
setColor("#ffffff");
clearInterval(interval);
}
stop.addEventListener('click',stopDisco)
start.addEventListener('click', function() {
clearInterval(interval);
interval = setInterval(changeColor,50)
setTimeout(stopDisco,5000)
})<body>
<div>
<button class="on" id="start">Start Disco</button>
<button class="stop" id="stop">Stop Disco</button>
<p>Hex Color:<span class="color">#FFFFFF</span></p>
</div>
</body>Instead of adding an eventListener to the Stop button, you could simply pass the clearInterval() and stopDisco() methods to a setTimeout(), like so:
function setColor(randomColor){
var body = document.body;
body.style.backgroundColor=randomColor;
var span = document.querySelector(".color");
span.innerText = "\t"+randomColor;
}
function changeColor(){
var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
setColor(randomColor);
}
const stopDisco = () => {
var btn = document.querySelector("button");
// btn.setAttribute("class", "on");
setColor("#ffffff");
}
function startDisco(){
var btn = document.querySelector("button");
// var btnClass = btn.getAttribute("class");
changeColor();
let interval = setInterval(changeColor, 50);
/*
var stopBtn = document.querySelector(".stop")
stopBtn.addEventListener('click', function () {
clearInterval(interval);
stopDisco();
})
*/
setTimeout(() => {
clearInterval(interval);
stopDisco();
}, 3000); // Stop Disco after 3 seconds, but you could manipulate this value as per your need
}<body>
<div>
<button class="on" onclick="startDisco()">Start Disco</button>
<button class="stop">Stop Disco</button>
<p>Hex Color:<span class ="color">#FFFFFF</span></p>
</div>
</body>For reference, read through the following MDN doc: