Javascript Vanilla - обработчик событий двойного щелчка на входах / GetElementsByTagName

Question

Проблема: Невозможно назначить обработчик событий двойного щелчка моим сгенерированным входам; это возможно с помощью getElementsByTagName?

Спасибо за любую помощь

Вот код:

---

Сгенерированные входы

function list_tasks() {
    let container = document.getElementById("todo");
    container.innerHTML = ""

    if (task_array.length > 0) {
        for (let i = 0; i < task_array.length; i++) {
            let input = document.createElement("input");
            input.value = task_array[i];
            input.classList.add("record");
            input.disabled = true;
            container.appendChild(input);
        }
    }
}

---

Прикрепление события

document.getElementsByClassName("record").addEventListener("dblclick", editTask);

---

И console.log никогда не вызывается

function editTask(e){
   console.log("double click")
}

---

Обновление Попытка перебрать массив, но событие двойного щелчка не запускается

let record = document.getElementsByClassName("record");
for(var i = 0; i <= record.length; i++){
    document.getElementsByClassName("record")[i].addEventListener("dblclick", editTask);
}

Answer 1

getElementsByClassName возвращает список узлов, то есть массив. Для доступа к элементу необходимо получить значение из массива.

Попробуй это:

document.getElementsByClassName("record")[0].addEventListener("dblclick", editTask);

Это должно работать.

Answer 2

Причина, по которой это не работает, заключается в том, что вы помечаете входы как отключенные. Отключенные входы не реагируют на некоторые события, и похоже, что двойной щелчок является одним из них.

Кроме того, как писал @Royson, getElementsByClassName() возвращает список из нескольких элементов. Если вы хотите добавить прослушиватель событий для всех них, у вас есть 2 варианта:

Наилучший вариант IMO, если это возможно, это прикрепить его при создании элементов в list_tasks() функция:

let input = document.createElement("input");
input.value = task_array[i];
input.classList.add("record");
input.disabled = true;
input.addEventListener("dblclick", editTask); // <--- here
container.appendChild(input);

Если это невозможно из-за недоступности областей, вы просто зацикливаетесь на результате getElementsByClassName():

Array.from(document.getElementsByClassName("record")).forEach(el => el.addEventListener("dblclick", editTask));

---

Редактировать: спецификация говорит, что события "щелчка" должны быть отключены на отключенном входе. Несмотря на то, что двойной щелчок не указан напрямую, я предполагаю, что это также подразумевается как щелчок, или он требует, чтобы щелчок был включен, чтобы он мог поймать два быстрых. https://html.spec.whatwg.org/multipage/form-control-infrastructure.html

Answer 3

Способ сделать это состоит в том, чтобы создать элементы как элементы списка, а затем сделать contentEditable для элементов списка по двойному щелчку B-)