JS стили не работают

Question

Я хочу закрасить фон блоков классом features__box, но JS не работает / Chrome не распознает никаких ошибок.

Вот 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>

Это 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";
    }

});

По умолчанию фон каждого элемента белый. Я хочу, чтобы это переключалось. Пожалуйста, помогите!

Answer 1

Слушатели событий должны быть внутри вашего цикла и подключены к каждому элементу объекта.

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]
  });
}

Answer 2

Ошибка в написании feature_i внутри цикла, в котором вы пишете fearture_i . Кроме того, вам нужно изменить его на feature_i.length .

Есть более простой способ с JQuery. Вы можете сделать следующее:

$(document).ready(function(){

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

});

Редактировать Чтобы переключить красный цвет, измените функцию следующим образом:

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

Answer 3

Похоже, ваш цикл for не верен. Вам не хватает свойства .length во второй части вашей настройки цикла.

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