Вызов методов объекта в javascript из события html oninput ()

Question

В JavaScript у меня есть список объектов того же класса. Каждый объект имеет одинаковые переменные и методы. Для каждого объекта, добавляемого в список, в HTML-код добавляется поле ввода .

Теперь, когда значение поля ввода изменяется (<input oninput=...>), я хочувызвать метод inputModified() точного объекта в списке, который был добавлен в список вместе с полем ввода. Как бы вы достигли этого?

Кроме того, если объект удален из списка, то HTML-код, который был добавлен для этого объекта, также удаляется.

Является ли инкрементный идентификатор единственнымпуть? Также обратите внимание, что я не могу использовать jquery или что-то подобное. Спасибо!

Answer 1

Лучший способ - вообще не использовать <input oninput=...>. Используйте современную обработку событий. Затем вы либо прикрепляете обработчик, закрывающий запись в списке, либо включаете позицию в список элемента и используете делегированный обработчик input для контейнера, в котором находятся эти input, чтобы выяснить, какая запись всписок для обновления.

Вот пример первой опции, закрывающей запись в списке:

function addToDOM(entry) {
    const input = document.createElement("input");
    input.type = "text";
    input.value = entry.value;
    // The event handler closes over `input` and `entry`
    input.addEventListener("input", function() {
        entry.value = input.value;
    });
    return input;
}

const list = [];
const container = document.getElementById("container");
for (let n = 0; n < 10; ++n) {
    const entry = {
        value: `Value ${n + 1}`
    };
    container.appendChild(addToDOM(entry));
    list.push(entry);
}

// Adding another later
setTimeout(() => {
    const entry = {
        value: "Added later"
    };
    container.appendChild(addToDOM(entry));
    list.push(entry);
}, 800);

document.getElementById("btnShowAll").addEventListener("click", function() {
    list.forEach(({value}, index) => {
        console.log(`[${index}].value = ${value}`);
    });
});

<input type="button" id="btnShowAll" value="Show All">
<div id="container"></div>

Вот пример второго варианта с одним делегированным обработчиком. Обратите внимание, что если вы измените список, индекс, который мы храним как атрибут data-*, устареет:

function addToDOM(entry, index) {
    const input = document.createElement("input");
    input.type = "text";
    input.value = entry.value;
    input.setAttribute("data-index", index);
    return input;
}

const list = [];
const container = document.getElementById("container");
container.addEventListener("input", function(e) {
    const input = e.target;
    const index = +input.getAttribute("data-index");
    list[index].value = input.value;
});
for (let n = 0; n < 10; ++n) {
    const entry = {
        value: `Value ${n + 1}`
    };
    container.appendChild(addToDOM(entry, list.length));
    list.push(entry);
}

// Adding another later
setTimeout(() => {
    const entry = {
        value: "Added later"
    };
    container.appendChild(addToDOM(entry, list.length));
    list.push(entry);
}, 800);

document.getElementById("btnShowAll").addEventListener("click", function() {
    list.forEach(({value}, index) => {
        console.log(`[${index}].value = ${value}`);
    });
});

<input type="button" id="btnShowAll" value="Show All">
<div id="container"></div>