Tengo este código aquí y quiero que el fondo deje de cambiar cuando hago clic en el mismo botón (el intervalo para detener). Pero no puedo solucionarlo. (La otra parte funciona porque en la consola isCicked cambia su valor).
let btn = document.querySelector('#btn'); let body = document.querySelector('body'); let isClicked = false; btn.addEventListener('click', function(){ let x; let y; if(isClicked == false){ isClicked = true; x= setInterval(function(){ let r,g,b; r = Math.round(Math.random() * 255); g = Math.round(Math.random() * 255); b = Math.round(Math.random() * 255); body.style.backgroundColor = `rgb(${r},${g},${b})`; btn.classList.toggle('button-style') },1000) }else{ isClicked = false; clearInterval(x); } console.log(isClicked); }) <button type="button" id="btn">Click</button>Para corregir su código actual, debe declarar x fuera del detector de eventos, ya que tal como está, lo vuelve a declarar en cada clic y sobrescribe su ID de intervalo almacenado.
let isClicked = false; let x; btn.addEventListener('click', function(){ if(isClicked == false){ isClicked = true; x = setInterval(function(){ ... } Pero en realidad puede simplificar un poco combinando isClicked y x y simplemente verificando si hay un intervalo almacenado.
let btn = document.getElementById('btn'); let body = document.querySelector('body'); let interval = null; btn.addEventListener('click', function () { if (interval === null) { interval = setInterval(function () { let r, g, b; r = Math.round(Math.random() * 255); g = Math.round(Math.random() * 255); b = Math.round(Math.random() * 255); body.style.backgroundColor = `rgb(${r},${g},${b})`; btn.classList.toggle('button-style'); }, 1000); } else { clearInterval(interval); interval = null; } console.log(interval); }); <button type="button" id="btn">Click</button>En lugar de tratar de administrar el estado de setInterval , podría usar setTimeout y recursión (una función que se llama a sí misma) para crear un intervalo. Del mismo modo, en lugar de usar la mutación variable, dado que está alternando una clase en el botón, puede usar el botón como condición de salida para la recursividad.
let btn = document.querySelector('#btn'), body = document.querySelector('body'); function ChangeBackground() { if (btn.classList.contains('button-style')) { //check exit condition body.style.backgroundColor = '#' + Math.random().toString(16).slice(-6); setTimeout(ChangeBackground, 1000); //recursion } } btn.addEventListener('click', function(){ this.classList.toggle('button-style'); //toggle exit condition ChangeBackground(); //start recursion }); <button type="button" id="btn">Click</button>