CODEWITHSUNDEEP
javascripthtmlcssbuttononclick
I'm just a coder for fun
I'm just a coder for fun

Reputation: 151

Div to show box shadow when button is clicked

I am wanting to have this button be clicked and then it highlight the div orange.. So far, I am only able to get it to highlight the button when clicked... Unfortunately, the div highlights whether the button click is done or not.. NO jquery please.

   var addShadow = function(e) {
     e = e || window.event;
     e.preventDefault();
     var el = e.target || e.srcElement;
     el.className = 'highlight';
     setTimeout(function() {
       removeShadow(el);
     }, 300);
   };

   var removeShadow = function(el) {
     el.className = 'normal';
   };
.normal{
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width:400px;
}
.highlight{
  box-shadow: inset 0 0 20px 0 orange;
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width:400px;
 }
<button class="normal" onclick='addShadow(event);'>
Click here to highlight div.</button>

<div class="highlight">Want it to highlight orange here when button is clicked.</div>

Upvotes: 0

Views: 2897

Answers (3)

Temani Afif
Temani Afif

Reputation: 274385

You can use CSS and the :active state for this:

.normal{
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width:400px;
}


.normal:active + .normal{
  box-shadow: inset 0 0 20px 0 orange;
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width:400px;
 }
<button class="normal" >
Click here to highlight div.</button>

<div class="normal">Want it to highlight orange here when button is clicked.</div>

Upvotes: 1

Ilan P
Ilan P

Reputation: 1792

Give this code a try:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <title>Ilan's Test</title>
    <style>
        .normal {
            border: 1px solid grey;
            padding: 5px 7px;
            display: inline-block;
            margin: 5px;
            width: 400px;
        }

        .highlight {
            box-shadow: inset 0 0 20px 0 orange;
            border: 1px solid grey;
            padding: 5px 7px;
            display: inline-block;
            margin: 5px;
            width: 400px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12 normal" id="results">
                My div
            </div>
            <button class="btn btn-primary" id="switchbtn">Click me</button>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

    <script>
        // clicking the button begins here
        $('#switchbtn').click(function() {
            // lets get the div we're targeting
            var mydiv = $('#results');
            // lets check if its highlighted or not
            if (mydiv.hasClass('normal') == true) {
                // if the div is in its normal state, lets highlight it
                $(mydiv).removeClass('normal');
                $(mydiv).addClass('highlight');
            } else {
                // if the div is highlighted, let's normalize it
                $(mydiv).removeClass('highlight');
                $(mydiv).addClass('normal');
            }
        });
    </script>
</body>

</html>

Upvotes: -1

Hatchet
Hatchet

Reputation: 5428

You're adding the click handler to the button element, so when you click on it, the event target is going to be the button, which is why the button is getting highlighted instead of the div on click.

Instead of trying to grab the div from the event, you can just create a reference to it in your script by selecting it by its id. In the example below it's called divToHighlight.

var divToHighlight = document.getElementById('my-div');

var addShadow = function(e) {
  e = e || window.event;
  e.preventDefault();
  divToHighlight.className = 'highlight';
  setTimeout(function() {
    removeShadow(divToHighlight);
  }, 300);
};

var removeShadow = function(el) {
  el.className = 'normal';
};
.normal {
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width: 400px;
}

.highlight {
  box-shadow: inset 0 0 20px 0 orange;
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width: 400px;
}
<button class="normal" onclick='addShadow(event);'>
Click here to highlight div.</button>

<div class="normal" id="my-div">Want it to highlight orange here when button is clicked.</div>

Upvotes: 2

Related Questions