Как записать в журнал значение вложенного элемента без его идентификатора? - PullRequest
Новая
       29

Как записать в журнал значение вложенного элемента без его идентификатора?

1 голос
/ 26 апреля 2019

Я пытаюсь выбрать значение поля ввода из сгенерированного пользователем списка текстовых полей и затем записать его значение в консоль. Я не смог найти способ выбрать значение дочернего элемента ребенка, в котором идентификаторы неизвестны. В настоящее время я получаю эту ошибку консоли: 

cannot read property 'getElementsByTagName' of undefined

Вот мой HTML: 

<form id="form1" action="processing.php" method="post">
    <ol id="spawnList"> 
    </ol>
    <button type="button" id="spawnbtn" onClick="spawnSilly();">Add</button>
    <button type="button" name="submit" onClick="sub_strings()">Save</button>
</form>

Это пример списка элементов, который будет генерировать пользователь: 

<li id="465817232" class="1" index="1">
    <input type="text" placeholder="Title" id="465817232" class="1" index="1">
    <button type="button" onclick="redirect()" id="465817232" class="1" index="1">Edit</button>
    <button id="465817232" onclick="removeElement(this.id)" class="1" index="1">Delete</button>
</li>

Это моя функция JS: 

    function sub_strings()
    {
        var printer = document.getElementById("spawnList").getElementsByTagName["LI"].getElementsByTagName["INPUT"].item[1];
        console.log(printer)
    }

Любая помощь будет очень ценится:)

Ответы [ 2 ]

2 голосов
/ 26 апреля 2019

Возможно, вы думаете, что эти атрибуты элемента являются массивами, однако эти "атрибуты" являются функциями, которые возвращают "массивы" (фактически возвращают объекты, которые можно рассматривать как массивы).

Я рекомендуюВы должны использовать такие функции, как .querySelector и / или .querySelectorAll, которые используют селекторы. 

Array.from(document.querySelectorAll('#spawnList li input')).forEach(input => {
  console.log(input.id);
});
<form id="form1" action="processing.php" method="post">
  <ol id="spawnList">
    <li id="465817232" class="1" index="1">
      <input type="text" placeholder="Title" id="465817232" class="1" index="1">
      <button type="button" onclick="redirect()" id="465817232" class="1" index="1">Edit</button>
      <button id="465817232" onclick="removeElement(this.id)" class="1" index="1">Delete</button>
    </li>
  </ol>
  <button type="button" id="spawnbtn" onClick="spawnSilly();">Add</button>
  <button type="button" name="submit" onClick="sub_strings()">Save</button>
</form>
0 голосов
/ 26 апреля 2019

Вы прочитали DOM, еще не созданный. Теги li генерируются динамически. Вы должны использовать библиотеку Jquery с .on () для реализации 

$(document).on("click","#spawnList",function() {
  // TODO
});
...