js styles don't work

Question

I want to color background of blocks with features__box class but JS doesn't work/ Chrome doesn't recognize any error.

Here is HTML

<div class="features__active features__box">
            <h3>Visual Composer</h3>
            <p>TheFox comes with the Visual Composer Plugin. You won’t need to code or to remember any shortcodes with our. </p>
        </div>
        <div class="features__box">
            <h3>Responsive</h3>
            <p>TheFox comes with the Visual Composer Plugin. You won’t need to code or to remember any shortcodes with our. </p>
        </div>
        <div class="features__box">
            <h3>Retina Ready</h3>
            <p>TheFox comes with the Visual Composer Plugin. You won’t need to code or to remember any shortcodes with our. </p>
        </div>

THis is JS :

var feature_i = document.querySelectorAll('.features__box');

feature_i.addEventListener('click', function(){

    for( var i = 0; i < fearture_i.length; i++) {
        feature_i[i].style.backgroundColor = "red";
    }

});

By default the background of each item is white. I want it to toggle. Please, help!

https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method — epascarello, Aug 28 '18 at 21:21

kidA · Answer 1 · 2018-08-28T21:13:29.763

2

The event listeners need to be inside your loop and attached to each object element.

var feature_i = document.querySelectorAll('.features__box');

for (var i = 0; i < feature_i.length; i++) {
    feature_i[i].addEventListener('click', function() {
        this.style.backgroundColor = "red"; // where "this" refers to feature_i[i]
  });
}

edited Aug 28 '18 at 21:13

answered Aug 28 '18 at 21:08

kidA

1,379
1
9
19

score 1 · Answer 2 · answered Aug 28 '18 at 21:05

1

It looks like your for loop isn't correct. You're missing the .length property in the second part of your loop setup.

for( var i = 0; i < fearture_i; i++) {
    feature_i[i].style.backgroundColor = "red";
}

answered Aug 28 '18 at 21:05

Kevin Costello

26
2

Mario Ortiz · Answer 3 · 2018-08-28T22:33:02.590

1

There's an error in the spelling of feature_i inside the loop where you're writting fearture_i. In addition you need to change it to feature_i.length.

There is an easier way with JQuery. You could do the following:

$(document).ready(function(){

  $(".features__box").click(function(){
      $(".features__box").css("background-color", "red");
  });

});

Edit In order to toggle the red color chage the function as:

$(".features__box").click(function(e){
  $(".features__box").css("background-color", "white");
  var current = e.target;
  current.style.background = "red";
});

edited Aug 28 '18 at 22:33

answered Aug 28 '18 at 21:16

Mario Ortiz

173
1
8

how to toggle class 'red' ? I want each item to become red when I click , and one that is currently active to hide that style – Oksana Shukh Aug 28 '18 at 21:21
Do you mean only one red item each time? – Mario Ortiz Aug 28 '18 at 22:07
I mean when I click on a div block it becomes red, the next time I click another div with the same class, the color of the previously clicked dissapears and appers on another div that is currently clicked – Oksana Shukh Aug 28 '18 at 22:12

js styles don't work

3 Answers3