I want to toggle CSS property using javascript

Question

<div class="content">
          <?php
            for ($i=0; $i < 5; $i++) {
              echo '<div class="foo">
              </div>';
            }
          ?>
          <script>
            var foo= document.getElementsByClassName('foo');
            for (var i = 0; i < foo.length; i++) {
              foo[i].addEventListener("click", function(){
                this.style.backgroundColor = "lightgreen";
                });
            }
          </script>

I have created one div class called "content" and inside that content div there are five divs generated using php for loop. I want to change the divs "foo" background color to light green which is achieved already, but my concern is how to change the background color property again to white?

Welcome to SO, Please add your code into snippet, So someone has quickly fixed your issue. — jaydeep patel
– jaydeep patel, Commented Aug 24, 2018 at 5:24
Create a class with background-color: lightgreen and toggle this class on the element instead: this.classList.toggle('your_class_name'). — 31piy
– 31piy, Commented Aug 24, 2018 at 5:27

charan kumar · Accepted Answer · 2018-08-24 05:40:26Z

1

Extending the Lahiru TM approach

Try using this, so that it will toggle the color on click

<div class="content">
     <?php
       for ($i=0; $i < 5; $i++) {
          echo '<div class="foo">test
           </div>';
       }
     ?>
</div>
<script>
var foo= document.getElementsByClassName('foo');
for (var i = 0; i < foo.length; i++) {
    foo[i].addEventListener("click", function(e){
        if (this.style.backgroundColor == 'lightgreen') {
            this.style.backgroundColor = "white";
        } else {
            this.style.backgroundColor = "lightgreen";
        }
    });
}
</script>

answered Aug 24, 2018 at 5:40

charan kumar

2,1662 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LahiruTM · Accepted Answer · 2018-08-24 05:36:05Z

0

You can try below approach for that,

<script>
var foo= document.getElementsByClassName('foo');
for (var i = 0; i < foo.length; i++) {
    foo[i].addEventListener("click", function(e){
        if (e.style.backgroundColor) {
            e.style.backgroundColor = "null";
        } else {
            e.style.backgroundColor = "lightgreen";
        }
    });
}
</script>

answered Aug 24, 2018 at 5:36

LahiruTM

6484 silver badges16 bronze badges

Comments

Abhishek Ekaanth · Accepted Answer · 2018-08-24 05:49:28Z

0

It is advisable to use the CSS class then of a class property.

You can do something like this

    <div class="content">
         <?php
           for ($i=0; $i < 5; $i++) {
              echo '<div id="i" class="preToggle" (click)="divClicked($event , i)">test
               </div>';
           }
         ?>
    </div>
    <script>
    divClicked(event , i){
        var foo= document.getElementById(i);
        foo.className = foo.className.replace("preToggle", "postToggle");
}
    </script>

define CSS for preToggle and postToggle.

answered Aug 24, 2018 at 5:49

Abhishek Ekaanth

2,5872 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

I want to toggle CSS property using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related