Получение текста динамического элемента в JS

#javascript #html

#javascript #HTML

Вопрос:

Я генерирую поля ввода динамически, надеясь проанализировать любой текст, введенный в поле, и обработать его в keydownFunc позже. После ключевого события текст в DOM недоступен.

Вот мой код:

 for (i = 1; i < 7; i  ) {
  var element = document.createElement("input");
  element.setAttribute("style", "width:33px;");
  element.setAttribute("name", i);
  element.setAttribute("onkeydown", "keydownFunc(event);");
  var tempID = document.getElementById(i)
  tempID.appendChild(element);

}

function keydownFunc(event) {
  var x = event.keyCode;
  if (x == 13 | x == 9) {
    path = event.path[1].id
    console.log(path);
    //           process input
  }
}

 <table id="table">
  <tbody>
    <td id="1"></td>
    <td id="2"></td>
    <td id="3"></td>
    <td id="4"></td>
    <td id="5"></td>
    <td id="6"></td>
  </tbody>
</table>

Ответ №1:

Вам следует избегать назначения обработчиков событий с использованием on... атрибутов. Вы должны использовать addEventListener вместо:

 element.addEventListener("keydown", keydownFunc);

Также path является довольно неясным и не стандартным свойством объекта Event. К чему вы пытаетесь получить доступ? Если это сам ввод, то используйте event.target (например event.target.value , чтобы получить его значение), или если вы хотите получить ячейку таблицы, то используйте event.target.parentNode .

1. event.target.value сделал свое дело. Пожалуйста, прокомментируйте, почему я должен избегать назначения on .. attributes, и если это связано со стандартными методами или потому, что в конечном итоге это может вызвать некоторые проблемы с кодом, спасибо

2. Оба. Это стандартная практика, и это может привести к проблемам. An on... может содержать только один обработчик, поэтому он может быть случайно перезаписан другим скриптом. Это не может произойти с addEventListener .

Ответ №2:

Я не совсем уверен, в чем заключается ваш вопрос, но я думаю, вы хотите получить доступ к тексту, который кто-то ввел в текстовое поле, и что-то с ним сделать. Вы можете получить доступ к этому внутри вашего keydownFunc as

 event.path[0].value

Здесь event.path[0] будет элемент ввода.

Кстати, вам не нужно называть входной элемент, если вы не используете имя для чего-то другого.