1

Есть вот такой примитивный код

window.onload = function () {

    const ph_block = document.querySelectorAll(".pt_item");

    if (ph_block.length !== 0) {
        chooseVariable();
    }

    function chooseVariable() {
        const items = document.querySelectorAll(".ph_label");
        for (let i = 0; i < items.length; i++){
            items[i].addEventListener("click", function (){
                let item = this.target;
                console.log("click" + item);


            })
        } 
    }


}
.ph_label{
    display: block;
    position: relative;
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid #333;
    border-radius: 10px;
    cursor: pointer;
}

.ph_radio{
    
    position: absolute;
    top: 10px;
    right: 10px;

}
<div class="pt_item">
    <div id="ph_block1" class="pt_block">
        <label class="ph_label">
            <span class="ph_name">It's first variant of answer</span>
            <input class="ph_radio" type="radio" name="ph_1" value="ph_1_1">
        </label>
        <label class="ph_label">
            <span class="ph_name">It's second variant of answer</span>
            <input class="ph_radio" type="radio" name="ph_1" value="ph_1_2">
        </label>
        <label class="ph_label">
            <span class="ph_name">It's third variant of answer</span>
            <input class="ph_radio" type="radio" name="ph_1" value="ph_1_3">
        </label>
        <label class="ph_label">
            <span class="ph_name">It's forth variant of answer</span>
            <input class="ph_radio" type="radio" name="ph_1" value="ph_1_4">
        </label>
    </div>
</div>

Задача - по нажатию на label получать значение value того input который его содержит.

У меня вопросЖ почему при текущем коде, мне в консоль дважды выводить значение, если итерируютсь по label элементам.

5
  • 2
    Дважды, потому что сначала щелчок идет на span Или input, затем всплывает на label.
    – SwaD
    10 фев в 13:45
  • SwaD правильно описал проблему. Одно из решений, это вынести вложенные элементы span и input из элемента label и расположить их на одном уровне с элементом label. 10 фев в 13:56
  • ok, почему this.target возвращает undefined ? Ожидается что при клике туда ж попадает node элемент ? 10 фев в 14:14
  • Нет. this это текущий элемент, на котором стоит слушатель, а вот входящее событие как раз будет содержать target. Структура html это ваша или из задания?
    – SwaD
    10 фев в 14:18
  • структура моя, при работе с jQuery всё хорошо, а вот при переписывание на ванильный какое-то недопонимание возникло. 10 фев в 14:21

1 ответ 1

2

Для обращения к элементу, с которым связан label, необходимо обратиться к свойсву control. Оно содержит как раз ссылку на элемент.

window.onload = function () {

    const ph_block = document.querySelectorAll(".pt_item");

    if (ph_block.length !== 0) {
        chooseVariable();
    }

    function chooseVariable() {
        const items = document.querySelectorAll(".ph_label");
        for (let i = 0; i < items.length; i++){
            items[i].addEventListener("click", function (e){
                e.preventDefault()
                console.log('Связан инпут: ', this.control.value);
                console.log(e.target, this);
            })
        } 
    }

}
.ph_label{
    display: block;
    position: relative;
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid #333;
    border-radius: 10px;
    cursor: pointer;
}

.ph_radio{
    
    position: absolute;
    top: 10px;
    right: 10px;

}
<div class="pt_item">
    <div id="ph_block1" class="pt_block">
        <label class="ph_label">
            <span class="ph_name">It's first variant of answer</span>
            <input class="ph_radio" type="radio" name="ph_1" value="ph_1_1">
        </label>
        <label class="ph_label">
            <span class="ph_name">It's second variant of answer</span>
            <input class="ph_radio" type="radio" name="ph_1" value="ph_1_2">
        </label>
        <label class="ph_label">
            <span class="ph_name">It's third variant of answer</span>
            <input class="ph_radio" type="radio" name="ph_1" value="ph_1_3">
        </label>
        <label class="ph_label">
            <span class="ph_name">It's forth variant of answer</span>
            <input class="ph_radio" type="radio" name="ph_1" value="ph_1_4">
        </label>
    </div>
</div>

UPD: Из комментариев. Сокращаем код, убираем ненужное.

window.onload = function () {

  document.querySelectorAll('.ph_label').forEach(function (item) {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      console.log('Связан инпут: ', this.control.value);
      console.log(e.target, this);
    })
  })

}
2
  • Спасибо, а можно ещё такое уточнение. Вот есть необходимость что бы chooseVariable() возвращала значение выбранного value. Добавил в конец функции return this.control.value; но ведь функция только раз вызывается, если её назначить переменной ? Как в глобальной переменной хранить значение нажатого input ? 10 фев в 15:03
  • 1
    @BlackStar1991 Из фукнции обработчика события вернуть значения нельзя. Как вариант записывать значение во внешнюю переменную. И вам не надо хранить все(наверно). Храните то значение, на которое тыкнули. + фукнция chooseVariable() создает слушатели и по сути не нужна вовсе. Можно без нее обойтись, сократив код
    – SwaD
    10 фев в 15:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.