• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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!

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report

0

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;
}
}
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error