Is there a way in JavaScript to prevent a function from being executed when a button is clicked and instead

Question

Is there a way in JavaScript to prevent a function from being executed when a button is clicked and instead

Is there a way to automatically stop changing the background color with random colors after a few seconds when clicking on a start button? I attempted using setTimeout() but my limited understanding of JavaScript has hindered me from finding a solution.

I would greatly appreciate it if someone could assist me in resolving this issue.

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");
  setColor("#ffffff");
}

function startDisco(){
  var btn = document.querySelector("button");
  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>

javascript

Answer 1

Answer №1

Here's an updated version

I incorporated a setTimeout function to end the process after a specified time

In addition, I have streamlined the definition of buttons and other elements for efficiency

const startBtn = document.getElementById("start");
const stopBtn = document.getElementById("stop");
const bodyElem = document.body;
const colorSpan = document.querySelector(".color");
let intervalID;

function setBackgroundColor(color) {
  bodyElem.style.backgroundColor = color;
  colorSpan.innerText = color; 
}

function changeBackgroundColor() {
  var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
  setBackgroundColor(randomColor);
}

const stopDisco = () => {
  setBackgroundColor("#ffffff"); 
  clearInterval(intervalID); 
}

stopBtn.addEventListener('click', stopDisco);

startBtn.addEventListener('click', function() {
  clearInterval(intervalID);
  intervalID = setInterval(changeBackgroundColor,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>

Answer 2

Here's an updated version

I incorporated a setTimeout function to end the process after a specified time

In addition, I have streamlined the definition of buttons and other elements for efficiency

const startBtn = document.getElementById("start");
const stopBtn = document.getElementById("stop");
const bodyElem = document.body;
const colorSpan = document.querySelector(".color");
let intervalID;

function setBackgroundColor(color) {
  bodyElem.style.backgroundColor = color;
  colorSpan.innerText = color; 
}

function changeBackgroundColor() {
  var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
  setBackgroundColor(randomColor);
}

const stopDisco = () => {
  setBackgroundColor("#ffffff"); 
  clearInterval(intervalID); 
}

stopBtn.addEventListener('click', stopDisco);

startBtn.addEventListener('click', function() {
  clearInterval(intervalID);
  intervalID = setInterval(changeBackgroundColor,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>

Answer 3

Answer №2

To avoid adding an eventListener to the Stop button, a more efficient approach would be to utilize the setTimeout function to execute clearInterval() and stopDisco() methods. Here's how you can achieve this:

function changeColor(){
  var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
  setColor(randomColor);
}

const stopDisco = () => {
  var btn = document.querySelector("button");
  setColor("#ffffff");
}

function startDisco(){
  changeColor();

  
  let interval =  setInterval(changeColor, 50);

  
  setTimeout(() => {
    clearInterval(interval);
    stopDisco();
  }, 3000); // Stops Disco after 3 seconds
}

<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 further information, refer to the following MDN documentation:

setTimeout

Answer 4

To avoid adding an eventListener to the Stop button, a more efficient approach would be to utilize the setTimeout function to execute clearInterval() and stopDisco() methods. Here's how you can achieve this:

function changeColor(){
  var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
  setColor(randomColor);
}

const stopDisco = () => {
  var btn = document.querySelector("button");
  setColor("#ffffff");
}

function startDisco(){
  changeColor();

  
  let interval =  setInterval(changeColor, 50);

  
  setTimeout(() => {
    clearInterval(interval);
    stopDisco();
  }, 3000); // Stops Disco after 3 seconds
}

<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 further information, refer to the following MDN documentation:

setTimeout

Is there a way in JavaScript to prevent a function from being executed when a button is clicked and instead

Answer №1

Answer №2

Similar questions

Instructions for adding a select dropdown feature in Angular 6 that includes a search filter. Additionally, tips on how to filter objects by their name property

Creating cookies in R Shiny: Storing variables for future use

Unpredictable jQuery Ajax setTimeout

Why do I keep getting undefined when I use React.useContext()?

Upon introducing the CSS loader into the webpack configuration, TinyMCE unexpectedly ceases to function

Using React.js - What is the process for submitting a form automatically when the page loads?

Having trouble uploading the file to Firebase storage

Challenges with v-autocomplete in Vuetify.js

How can I use console.log to display a message when a variable reaches a specific value?

Using React.js to create a modal that includes ExpansionPanelDetails with a Checkbox feature

An error occurs when trying to load data into a grid upon clicking, resulting in an Uncaught TypeError: Unable to access properties of undefined (specifically 'dataState')

Receiving an `Invalid module name in augmentation` error is a common issue when using the DefaultTheme in Material

How do I dynamically adjust class names for menu items as I scroll using jQuery?

Having trouble adding global method using Plugin in Vue 3?

An easy guide to animating multiple sections of progress bars individually in Bootstrap

Is it possible to retrieve the ID instead of the country name in the autocomplete feature?

Syntax for private members in ES6 classes

"Add a pre-hook in mongoose to update a field in findOneAndUpdate by retrieving data from a

Change the colors of a dynamic row in an HTML table using various options

A step-by-step guide on incorporating box-shadow for the jackColor in the Switchery Plugin