Как получить значение внутри блока на который нажали?

Question

[Данил Остапенко]

Доброго времени суток! Подскажите как получить значение input(hidden) #whatIsEXC внутри блока на который нажали ?

<div onclick="formExcLKThis(this)" class="lk-addapp-ajax-block">
    <input id="whatIsEXC" type="hidden" value="1902">
     <div class="lk-addapp-ajax-title">
     <span>#E-1902</span><strong>тест 1</strong>
    </div>
  </div>

 <div onclick="formExcLKThis(this)" class="lk-addapp-ajax-block">
    <input id="whatIsEXC" type="hidden" value="2000">
     <div class="lk-addapp-ajax-title">
     <span>#E-2000</span><strong>тест 1</strong>
    </div>
  </div>

Пробовал так но не поулчается:

function formExcLKThis(i) {
    var whatIsEXC = $(this, "#whatIsEXC").val();
    alert(whatIsEXC);
}

Подскажите как обратиться к элементу внутри блока по которому кликнул и получить значение ? ( В моем случае скрытый инпут )

Answer 1

[Dino Winchester]

Для начала:

1. ID атрибуты HTML - элементов должны быть уникальными.
2. Использование вызова функции через onclick в HTML тегах, выглядит так себе.

А по вопросу, то это можно сделать через делегирование событий:

document.addEventListener("click", ({ target }) => {
    if (target.classList.contains("lk-addapp-ajax-block")) {
      const value = target.querySelector("input").value;
      alert(value);
    }
  });

Для того чтобы всё работало корректно, придётся добавить в CSS одну строчку с правилом:

.lk-addapp-ajax-block  * {
        pointer-events: none;
}

Это для того чтобы клик попадал именно на родительский блок, а не на дочерние. Хотя это всё можно решить и по другому, но на мой взгляд и этого будет достаточно.

Answer 2

[webvalery]

document.getElementById('whatIsEXC').value;