An внутри дочернего диапазона не определено

Question

Итак, я сейчас пытаюсь получить доступ к вводу className HTML в этом элементе:

<div id="1">
      <span>
          <input name="classNameHTML" type="text" />
      <span>
</div>

Код, который я сейчас написал,

let cObj = document.getElementById(1);
let cObjClass = cObj.children[0].classNameHTML.value; <--- buggy line

Сообщение об ошибке:

Uncaught TypeError: Cannot read property 'value' of undefined
at calcGrade (index.html:172)
at HTMLButtonElement.onclick (index.html:243)

Я думал, что дети [0] будут ссылаться на диапазон, а затем я могу использовать ссылочный className HTML через его входное имя. Консоль сообщает, что clasName HTML не определено, когда я сделал console.log (). Может ли кто-нибудь сказать мне, что я сделал здесь не так с оператором точки?

Answer 1

Как уже упоминалось:

let cObjClass = cObj.children[0].classNameHTML.value;

недействительно. Разбивка на части:

coObj - это окружающий div.

.children[0] - диапазон внутри div.

.classNameHTML - это свойство с таким именем, принадлежащее к пролету. Этого не существует.

Вам нужен ввод, который находится внутри диапазона. Это приведет вас к вводу:

cObj.children[0].firstChild

Затем значение ввода в качестве первого дочернего элемента диапазона:

cObj.children[0].firstChild.value

Но если вы хотите получить доступ к ввод по имени вместо его позиции, используйте:

cObj.children[0].querySelector('[name="classNameHTML"]').value

Это получит элемент внутри диапазона с name="classNameHTML".

Answer 2

Если вы хотите получить className из элемента, вы должны использовать .className вместо .className HTML .value