Как включить JS onchange событие для HTML ячейки сетки

Question

Я не хочу использовать JQuery - просто HTML и JS

У меня есть сетка HTML, и я хочу обнаружить DOM 'onchange' изменения TextArea в ячейках, которые делают вверх по указанному c столбцу таблицы.

Я не уверен, как зарегистрировать эту функцию 'onchange' для вызова - кто-то может помочь?

Дополнительная информация ----

В настоящее время - у меня есть небольшой встроенный микро, который предлагает веб-страницы для конфигурации. Я использую Jquery и небольшой редактор сетки JQ.

Я хочу избавиться от JQ, так как размер кода в 20 раз больше, чем страницы моего приложения. Когда я избавляюсь от JQ - я также избавляюсь от небольшого редактора сетки.

Я не использую HTML Формы.

Я динамически создаю сетку на основе данных конфигурации. Типичная сетка может состоять из 6 столбцов и 15 строк.

Я хочу проверить пользовательскую запись в ячейке 'onchange' в указанном столбце c, поэтому мой код JS обновляет / изменяет другие ячейки в сетка на основе этого изменения.

Вот строковая запись HTML для сетки

       <div class="UnivTable">
    <fieldset>
    <legend>Universes</legend>
      <table id="tblUniverses" >
        <tr>
          <th>Order<br />Placement</th>
          <th style="width:10px"></th>
          <th>Universe<br />Number</th>
          <th>Channels<br />per Universe</th>
          <th style="width:10px"></th>
          <th style="display:none;"></th>
          <th>Controller<br />Start Channel</th>
          <th>Controller<br />End Channel</th>
        </tr>

      </table>

    </fieldset>
    </div>

Вот мой текущий JQ для добавления ROW

         $("#tblUniverses tbody").append(
     "<tr>"+
     "<td>"+DA[0]+"</td>"+
     "<td class='gap'></td>"+       
     "<td contenteditable='true'>"+DA[1]+"</td>"+
     "<td contenteditable='true'>"+DA[2]+"</td>"+
     "<td class='gap'></td>"+
     "<td style='display:none;'>"+DA[3]+"</td>"+
     "<td class='NF'>"+DA[4]+"</td>"+
     "<td class='NF'>"+DA[5]+"</td>"+       
     "</tr>");

THAT будет изменен на JS code.

В строке THAT есть две (2) ячейки, для которых я хочу запустить событие.

Могу ли я добавить слушатель в операторе ?

Я oop через DOM для этой таблицы и всех прослушивателей событий для этих ячеек - если да, то как?

Answer 1

HTML пример

<textarea id='textarea'></textarea>
<div id="log"></div>

этот скрипт поможет вам

        document.addEventListener("DOMContentLoaded", () => {
            const textarea = document.getElementById('textarea');
            const log = document.getElementById('log');

       textarea.addEventListener('change' , updateValue)
       function updateValue(e) {
           console.log(e);
           log.textContent = e.target.value;
}
});

вы можете повесить слушателя через изменение идентификатора и написать свою собственную функцию, в которой может быть что угодно. Через e вы можете отслеживать, что вы можете изменить на своей странице