Доступ к свойствам parentElement через событие

Question

У меня есть div, который я назвал quote_div и является parentElement. Он содержит два элемента input type="number", элемент <label>, который я назвал r_lbl (имя переменной), и другой элемент <label>, называемый r_position (так что это четыре элемента в одном div).

Я поместил прослушиватель событий в div, чтобы при изменении элемента input type="number" можно было выполнять вычисления.

quote_div.addEventListener("change", calculateCost);

Теперь я пытаюсь получить доступ к элементу r_position на элементе div, используя триггер события e (который анализируется для функции calcCost (e)), но я получаю неопределенную ошибку, что странно, поскольку я заранее определил значение для r_position .

console.log("li element position: " + e.target.parentElement.r_position.value);

Разве нельзя так поступить? Если так, что я не понял?

Answer 1

В зависимости от вашей HTML-структуры вы можете использовать NonDocumentTypeChildNode.previousElementSibling или NonDocumentTypeChildNode.nextElementSibling:

const div = document.getElementById('quote_div');

div.addEventListener('change', (e) => {
  const target = e.target;  
  const label = target.previousElementSibling;
  
  console.log(label.innerText);
});

<div id="quote_div">
  <label class="r_lbl" for="input1">Label 1</label>
  <input id="input1" type="number" />
  
  <label class="r_position" for="input2">Label 2</label>
  <input id="input2" type="number" />
</div>

В противном случае вы можете использовать Element.querySelector() от родителя <div>, используя id, class, name или любой другой селектор:

const div = document.getElementById('quote_div');

div.addEventListener('change', (e) => {
  const div = e.target.parentElement;  
  const label1 = div.querySelector('.r_lbl');
  const label2 = div.querySelector('.r_position');
  
  console.log(label1.innerText, label2.innerText);
});

<div id="quote_div">
  <label class="r_lbl" for="input1">Label 1</label>
  <input id="input1" type="number" />
  
  <label class="r_position" for="input2">Label 2</label>
  <input id="input2" type="number" />
</div>