Блог

Главная - Вопросы по программированию - Просьба внести ясность в более четкое понимание родительского элемента

Просьба внести ясность в более четкое понимание родительского элемента

#javascript

Вопрос:

Хотя мой код работает, и я все это понимаю, я озадачен тем, почему parentElement работает для приведенного ниже кода.

Насколько я понимаю, родительским элементом элемента button должен быть div с классом «child-div», так почему же тогда код все еще дает мне правильный ответ для каждого «названия магазина» при нажатии кнопки «Ок»?

Любая ясность будет высоко оценена:

 let addToCart = document.getElementsByClassName("button-ok");

function addToCartClicked(event) {
  let button = event.target;
  let shopItem = button.parentElement;
  let title = shopItem.getElementsByClassName("shop-item-title")[0].innerText;
  console.log(title);
}

for (let i = 0; i < addToCart.length; i  ) {
  let button = addToCart[i];
  button.addEventListener("click", addToCartClicked);
} 
 <div class="body-container">
  <div class="child-div">
    <p class="shop-item-title">Chocolate</p>
    <br />
    <button class="button-ok">Okay</button>
  </div>

  <div class="child-div">
    <p class="shop-item-title">Coke</p>
    <br />
    <button class="button-ok">Okay</button>
  </div>
</div>

Комментарии:

1. «родительским элементом элемента button должен быть div с классом body-container » … что заставляет тебя так думать? Родительским элементом каждой кнопки является <div class="child-div"> элемент

2. Спасибо, что прояснили это. Мне показалось, что я допустил ошибку, когда печатал его. В этом случае, если родительским элементом shopItem является «child-div», как код все еще работает? Разве это не должно работать только в том случае, если родительский элемент был «название магазина»?

3.Вы получаете parentElement значение, которое возвращает a <div class="child-div"> , и назначаете его shopItem . Затем вы получаете элементы с именем класса shop-item-title внутри этого <div class="child-div"> элемента при вызове shopItem.getElementsByClassName("shop-item-title")

4. О! Ладно, это идеальное объяснение. Я думаю, что это определенно помогает мне лучше понять код. Спасибо вам за вашу помощь. Это, безусловно, высоко ценится.

Метки: