Почему при нажатии на один элемент меняется цвет у обоих

Question

HTML

<div class='main'>
      <div class='m2'>Один</div>
      <div class='m2'>Два</div>
</div>

JS

 let main = document.querySelector('.main')
 
document.querySelector('.main').onclick = function a(event){
    if(event.target.className='m2'){
        let b = document.querySelectorAll('.m2')
        for(i=0;i<b.length;i++){
            b[i].style.color='red';
        }
    }
}

Answer 1

Потому что вы меняете цвет у обоих

let b = document.querySelectorAll('.m2') // находим все элементы с классом 'm2'
  for(i=0;i<b.length;i++) { // в цикле меняем их цвет
    b[i].style.color='red'; 
}

Answer 2

Чтобы цвет менялся только у одного, вам нужно элементам задать уникальные id и по ним менять цвет. Например, так:

HTML:

<div class='main'>
      <div id='id1' class='m2'>Один</div>
      <div id='id2' class='m2'>Два</div>
</div>

JS:

let main = document.querySelector('.main')
 
document.querySelector('.main').onclick = function a(event){
    if(event.target.className='m2'){
        let b = document.getElementById('id1');
            b.style.color='red';
    }
}

Answer 3

О_о там прямо так и написано: При клике, циклом пройти по всем элементам и менять их цвет)

Во-вторых, event.target.className = 'm2':

= это оператор присваивания.
Т.е. куда бы не кликнули, className элемента станет равным "m2"

А операция присваивания возвращает то, что присвоилось.
Т.е. на проверку идет строка if ("m2") которая в логическом контексте всегда будет true.

== оператор сравнения.
Как минимум, нужно было писать if (event.target.className == 'm2')

Но свойство className хранит одну сплошную строку, содержащую все классы элемента. Т.е. если у элемента будет class="m2 default", сравнение "m2 default" == "m2" вернет false. Чтобы не возиться со строкой и искать подстроки, наличие класса можно проверить по другому:

Свойство classList возвращает специальную коллекцию, которая хранит список всех классов элемента. У коллекции есть метод .contains("название-класса") - если есть такой класс, вернет true.

let main = document.querySelector('.main');

main.addEventListener("click", function(e) {
  if( !e.target.classList.contains("m2") ) return;
  // Если такого класса нет у кликнутого элемента, прервать функцию через return
  
  e.target.style.color = "red";
});

.m2 { margin: 5px; padding: 5px; border: 1px solid #123; cursor: pointer; }

<div class="main">
  <div class="m2">Один</div>
  <div class="m2">Два</div>
  <div class="m2">Три</div>
</div>

Можно было еще проверять так: if ( !e.target.matches(".m2") ) — туда уже нужно передавать не просто строку-название класса, а селектор (и не только класса, но и любой другой)

БЛОГ НА HUSL

Почему при нажатии на один элемент меняется цвет у обоих

Ответы (3 шт):