Click a div to change the shadow color, re-click to change back-CodePudding

Is it possible to do this without using JQuery?

I would like a div to change its shadow color once I clicked on it, and when I click on it again it will change back to its original color. Here's the code: http://jsfiddle.net/kqv7x5f8/5/

var btn = document.getElementById("btn");

function toShadow() {
  document.getElementById("btn").style.boxShadow = "5px 5px red"
}

#btn {
  height: 20px;
  border: 2px solid black;
  box-shadow: 5px 5px black;
}

<div id="btn" onclick="toShadow">
  click to change shadow; click again to change back
</div>

Thank you!

CodePudding user response：

It is better in this case to toggle a class by using classList.toggle()

const button = document.getElementById('btn');

button.addEventListener('click', e => e.currentTarget.classList.toggle('shadow'));

#btn {
  height: 20px;
  border: 2px solid black;
}

.shadow {
  box-shadow: 5px 5px black;
}

<div id="btn">
  click to change shadow; click again to change back
</div>

CodePudding user response：

You can make use of a boolean with an if/else statement for this problem

var btn = document.getElementById("btn");
var isRed = false;

function toShadow(){
if(isRed){
btn.style.boxShadow ="5px 5px black"
isRed = false;
}
else {
btn.style.boxShadow ="5px 5px red"
isRed = true;
}
}