How do I set revert back to conditions after an onclick event?

user_16083765 0
Viewed 250

Basically I what i want to create is where when a certain a div is clicked, the innerHTML changes, but i want it to go back after the click may after one second

 function setWheels() {
     document.querySelector(".blue-wheel").innerHTML = "<img src='blue-dark.svg.svg' id='blue-wheel-id' onclick='buttonEvent()'>";
  }

 function buttonEvent() {
      document.querySelector(".blue-wheel").innerHTML = "<img src='blue-light.svg.svg'>";
  }

right now as soon as the page loads, the setWheels function is called leading to the innerHTML to be that specific image. And when clicked it becomes the new one per the buttonEvent() function but it stays on that image and I would like it to go back to the other image after around one second. For reference other features will be added onto the buttonEvent such as audio may be more than one second

html javascript
2 Answers

You could use the setTimeout() method.

function setWheels() {
    document.querySelector(".blue-wheel").innerHTML = "<img src='blue-dark.svg.svg' id='blue-wheel-id' onclick='buttonEvent()'>";
}

function buttonEvent() {
    document.querySelector(".blue-wheel").innerHTML = "<img src='blue-light.svg.svg'>";
    setTimeout(setWheels, 1000);
}
user_166888130

You don't really need to change the html.

Use a css class to define the background (image), classList.toggle to switch the background, and setTimeout to revert after a certain time.

It is generally not a good idea to use inline event handlers. The snippet (mockup) uses event delegation for handling the click.

[edit] Snippet edited based on OP's question:

say if I were to add another wheel to the setWheels function, would i use an if statement in the buttonEvent() to check what wheel it is, then do the setTimeout

document.addEventListener(`click`, handle); 

document.body.insertAdjacentHTML(
  `beforeend`, `<div class="switch blue"></div><div class="switch green"></div>` );

function handle(evt) {
  const isSwitchElem = evt.target.closest(`.switch:not(.switched)`);
  
  if (isSwitchElem) {
    isSwitchElem.classList.toggle(`switched`);
    setTimeout(() => isSwitchElem.classList.toggle(`switched`), 1000);
  }
}
body {
  margin: 2rem;
  font: normal 12px/15px verdana, arial;
}

.switch {
  width: 64px;
  height: 64px;
  background: no-repeat left center;
  background-size: 64px;
  background-repeat: none;
  padding: 3px 3px 3px 22px;
  transition: all 0.6s ease;
  cursor: pointer;
  vertical-align: middle;
}


.switch.blue {
  background-image: url(//upload.wikimedia.org/wikipedia/commons/5/5a/Button_Icon_BlueSky.svg);
}

.switch.green {
  background-image: url(//upload.wikimedia.org/wikipedia/commons/8/81/Button_Icon_GreenYellow.svg);
}

.switched.blue {
  background-image: url(//upload.wikimedia.org/wikipedia/commons/3/3f/Button_Icon_Blue.svg);
}

.switched.green {
  background-image: url(//upload.wikimedia.org/wikipedia/commons/1/1e/Button_Icon_GreenForest.svg);
}

.switched:after {
  content: " Wait in a sec ...";
  margin-left: 68px;
  line-height: 64px;
  position: absolute;
  font-weight: bold;
  font-size: 1.2em;
  color: green;
}
<h3>Click the dots</h3>

NICon_581860
Related