Обращение к дочерним элементам

Question

Помогите обратиться к значению дочернего элемента. Есть функция, которая создает упорядоченный список. В каждый <li> я помещаю <input type="text">:

function CreateOL(number){
    this.myOL = document.createElement("ol");
    this.myOL.style.marginTop = "10px";
    this.myOL.style.marginLeft = "30px";
    let right = document.querySelector("#right");
     for (let i=1; i<=number; i++) {
        this.myLI = document.createElement("li");
            this.myInput = document.createElement("input");
            this.myInput.type = 'text';
            this.myInput.name = 'answerfield';
            this.myInput.size = '50';
            this.myInput.className = 'inputanswer';
            this.myInput.style.border = "1px solid black";
            this.myLI.appendChild(this.myInput);
            this.myOL.appendChild(this.myLI);       
        }
     right.appendChild(this.myOL);
     }

Как мне обратиться например к значению <input> пятого <li> Пробовал вот так this.myOL.childNodes[5].childNodes[1].val() но в отладчике значение для данной строки не отображается.

Answer 1

Не претендую на идеальное решение, но вот так вот работает:

function CreateOL(number) {
  this.myOL = document.createElement("ol");
  this.myOL.style.marginTop = "10px";
  this.myOL.style.marginLeft = "30px";
  let right = document.querySelector("#right");
  for (let i = 1; i <= number; i++) {
    this.myLI = document.createElement("li");
    this.myInput = document.createElement("input");
    this.myInput.value = i;
    this.myInput.type = 'text';
    this.myInput.name = 'answerfield';
    this.myInput.size = '50';
    this.myInput.className = 'inputanswer';
    this.myInput.style.border = "1px solid black";
    this.myLI.appendChild(this.myInput);
    this.myOL.appendChild(this.myLI);
  }
  right.appendChild(this.myOL);
  
  console.log($(this.myOL).children('li').eq(4).children('input').eq(0).val())
}

CreateOL(5);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="right" />

Answer 2

Неправильно прописывал значение. Вместо val() надо value. val() - это jquery

this.myOL.childNodes[4].childNodes[0].value

БЛОГ НА HUSL

Обращение к дочерним элементам

Ответы (2 шт):