Нужно что бы при нажатии на каждую кнопку менялся текст только для этой кнопки

Question

есть 3 (у всех class="box") в каждом из этих блоков есть

(class="box__text) и (class="box_btn") у всех div, p & button одинаковые классы, нужно что бы при нажатии на каждую кнопку менялся текс только для этой кнопки, id трогать нельзя. Что я делаю не так?

let btns = document.querySelectorAll('.box_btn');

btns.forEach((item) => {
  item.addEventListener('click', (el) => {
    el.target.closest('.box').classList.toggle('.box_text2');
  });
});

.box {
  margin: 2px;
  padding: 10px;
  height: 150px;
  width: 150px;
  border: 1px solid black;
}

.box_text {
  color: blue;
  font-size: 18px;
  font-style: italic;
}

.box_btn {
  font-size: 18px;
  font-style: italic;
  margin: 10px 0 0 0;
  height: 50px;
  width: 110px;
}

.box_text2 {
  color: red;
}

<div class="box">
  <p class="box_text"> Lorem, ipsum dolor.
  </p>
  <button class="box_btn">Button</button>
</div>

<div class="box">
  <p class="box_text"> Lorem, ipsum dolor.
  </p>
  <button class="box_btn">Button</button>
</div>

<div class="box">
  <p class="box_text"> Lorem, ipsum dolor.
  </p>
  <button class="box_btn">Button</button>
</div>

Answer 1

Такс пройдёмся по коду:

В метод toggle класс надо передавать без точки, но и это не поможет вам
closest возвращает родительский элемент, ему вы ставите новый класс box_text2. Несмотря на то что вы там указали цвет красный - это не значит, что это свойство CSS перепишет цвет для всех дочерних элементов. Это сработало бы, если вы указали inherit для цвета текста кнопки. Но т.к. вы его не указали, то переписать не получится, даже если напишите !important

let btns = document.querySelectorAll('.box_btn');

btns.forEach((item) => {
  item.addEventListener('click', (el) => {
    el.target.closest('.box').classList.toggle('box_text2');
  });
});

.box {
  margin: 2px;
  padding: 10px;
  height: 150px;
  width: 150px;
  border: 1px solid black;
}

.box_text {
  color: blue;
  font-size: 18px;
  font-style: italic;
}

.box_btn {
  font-size: 18px;
  font-style: italic;
  margin: 10px 0 0 0;
  height: 50px;
  width: 110px;
  color: inherit;
}

.box_text2 {
  color: red;
}

<div class="box">
  <p class="box_text"> Lorem, ipsum dolor.
  </p>
  <button class="box_btn">Button</button>
</div>

<div class="box">
  <p class="box_text"> Lorem, ipsum dolor.
  </p>
  <button class="box_btn">Button</button>
</div>

<div class="box">
  <p class="box_text"> Lorem, ipsum dolor.
  </p>
  <button class="box_btn">Button</button>
</div>

Answer 2

Как я понимаю вам нужно менять цвет текста по клику.

Во первых: в методе toggle вам нужно указать не селектор, а именно название класса то есть вместо toggle('.box_text2') нужно написать toggle('box_text2')

Во вторых: callback функция в методе addEventListener первым параметром получает не сам элемент, а вызванное событие. (то что вы написали el вместо event как я, на данный код не повлияет, но может сбить вас с толку в будущем).

В третьих: вы добавляете/удаляете класс box_text2 у div элемента, а нужно у элемента p поэтому через этот div можно найти лежащий в нём p элемент.

Совет: почаще смотрите код через панель разработчика. В хроме нажимаете в любом месте правой кнопкой мыши и жмёте "Посмотреть код"

let btns = document.querySelectorAll('.box_btn');

btns.forEach((item) => {
  item.addEventListener('click', (event) => {
    const box =  event.target.closest('.box')
    const boxText = box.querySelector('.box_text')
    boxText.classList.toggle('box_text2');
  });
});

.box {
  margin: 2px;
  padding: 10px;
  height: 150px;
  width: 150px;
  border: 1px solid black;
}

.box_text {
  color: blue;
  font-size: 18px;
  font-style: italic;
}

.box_btn {
  font-size: 18px;
  font-style: italic;
  margin: 10px 0 0 0;
  height: 50px;
  width: 110px;
}

.box_text2 {
  color: red;
}

<div class="box">
  <p class="box_text"> Lorem, ipsum dolor.
  </p>
  <button class="box_btn">Button</button>
</div>

<div class="box">
  <p class="box_text"> Lorem, ipsum dolor.
  </p>
  <button class="box_btn">Button</button>
</div>

<div class="box">
  <p class="box_text"> Lorem, ipsum dolor.
  </p>
  <button class="box_btn">Button</button>
</div>

БЛОГ НА HUSL

Нужно что бы при нажатии на каждую кнопку менялся текст только для этой кнопки

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