Как получить значение input

Найдите поле и прочитайте его свойство value — в тот момент, когда значение нужно, например по нажатию кнопки:

<input id="name" placeholder="Ваше имя">
<button id="ok">Готово</button>
<p id="result"></p>

const input = document.querySelector("#name");
const result = document.querySelector("#result");

document.querySelector("#ok").addEventListener("click", () => {
  const name = input.value.trim();
  result.textContent = name === "" ? "Имя не введено" : "Привет, " + name + "!";
});

После нажатия «Готово» под полем появится приветствие с введённым именем. trim() убирает пробелы по краям, чтобы строка из одних пробелов считалась пустой.

Почему value пустой

Самая частая ошибка — прочитать значение один раз, при загрузке страницы:

const name = document.querySelector("#name").value;

document.querySelector("#ok").addEventListener("click", () => {
  console.log(name);
});

В момент загрузки поле пустое, в name попадает "", и дальше там ничего не меняется. Переменная хранит значение, а не связь с полем. Читайте input.value внутри обработчика, как в первом примере.

Другие причины: селектор нашёл не то поле (на странице два с похожим id) или value берут у обёртки, а не у самого <input>.

Число из поля

value всегда строка, даже у <input type="number">. Перед расчётами переведите её в число:

const qty = Number(document.querySelector("#qty").value);

У полей type="number" есть и valueAsNumber: сразу число, а для пустого поля — NaN. Подробно о переводе — в справке Как перевести строку в число.

Флажок, список, переключатели

<input type="checkbox" id="agree"> Согласен
<select id="city">
  <option value="minsk">Минск</option>
  <option value="grodno">Гродно</option>
</select>
<input type="radio" name="size" value="s"> S
<input type="radio" name="size" value="m" checked> M

const agreed = document.querySelector("#agree").checked;
const city = document.querySelector("#city").value;
const size = document.querySelector('input[name="size"]:checked')?.value;

• У флажка смотрят checked — true или false. Его value не меняется от того, отмечен ли он.
• У <select> value — атрибут value выбранного <option> (здесь "minsk"), а не видимый текст.
• У переключателей выбранный ищут селектором :checked. Если не выбран ни один, querySelector вернёт null, а ?.value — undefined.

Следить за вводом

Событие input срабатывает при каждом изменении поля — удобно для подсказок и счётчиков символов:

const field = document.querySelector("#name");
const counter = document.querySelector("#counter");

field.addEventListener("input", () => {
  counter.textContent = field.value.length + " символов";
});

Вся форма сразу

Если полей много, их значения собирает FormData — по атрибутам name:

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
  const data = Object.fromEntries(new FormData(event.target));
  console.log(data);
});

В data окажется объект вида { name: "Аня", city: "minsk" }. Поля без атрибута name в него не попадут.