Как получить данные из инпута?

Question

[Bart Simpson]

В процессе обучения JS захотел сделать маленький проект по-типу Body Mass Index,
пользователь должен ввести свой возраст, рост и вес и дальше уже подогнать под формулу но столкнулся с проблемой что не могу получить данные из инпута.

Я понимаю что при загрузке страницы данные будут null, но мне не хочется делать отдельную кнопку, добавлять ивент лисенер и получать значение через фунцию. Я хочу чтоб сразу после введения данных я мог их получить. Сейчас имею такую проблему и Uncaught 'TypeError: Cannot read properties of null (reading 'value')'

Код:
https://codepen.io/Webjun/pen/gOXxmgJ

Comments

[Lynn «Кофеман»]

> Я хочу чтоб сразу после введения данных я мог их получить

Придётся добавить event listener у input-ов

[Ankhena]

Сейчас имею такую проблему и Uncaught 'TypeError: Cannot read properties of null (reading 'value')'

Таки придется проверять, чтобы там что-то было.

но мне не хочется делать отдельную кнопку, добавлять ивент лисенер

Не хотите, не делайте кнопку.
Вешайте на input

[Bart Simpson]

Lynn «Кофеман», Ankhena,
Захватить все инпуты через квериселектор, через форич подцепить ивентлистенер на инпут и получить данные?

[ThunderCat]

Ivan Lunin,

Захватить все инпуты через квериселектор, через форич подцепить ивентлистенер на инпут и получить данные?

по сути да. Только на селекты надо ончейндж, а на текст онкейап/онкейпресс, естественно. Или на онблур, но там будет так себе поведение. Ну и проверять значения на пустоту, если человек что-то стер в поле.

[Ankhena]

Ivan Lunin, да, по событию input.
Проверки не забывайте в любом случае.

Answer 1

[zkrvndm]

Используй атрибут oninput:

<input type="number" placeholder="Ваш возраст" oninput="age = this.value">

Код внутри oninput будет выполнятся всякий раз при вводе данных в поле - в переменной age будет лежать возраст.

Подробности можно найти здесь

Answer 2

[nuggeti]

С помощью jQuery :
var value = $('input').val()