Текстовые поля

Чтобы пользователь мог что-то ввести, на странице используют элемент input — поле, в которое можно писать. У него нет закрывающего тега:

<input id="color">

То, что написано в поле, находится в его свойстве value. Обычно его читают, когда пользователь нажимает на кнопку:

const colorInput = document.querySelector("#color");
const showButton = document.querySelector("#show");
const answer = document.querySelector("#answer");

showButton.addEventListener("click", function () {
    answer.textContent = `Ваш любимый цвет — ${colorInput.value}.`;
});

Читайте value внутри обработчика, в момент нажатия. Когда страница загружается, поле ещё пустое, поэтому при const color = colorInput.value; в начале скрипта color всегда была бы пустой строкой, "".

value — всегда текст, даже если пользователь вводит цифры, и даже в поле для чисел, <input type="number">. А вы знаете, что "40" + 4 — это "404". Чтобы считать со значением, превратите его в число с помощью Number():

console.log("40" + 4);         // Выводит: 404
console.log(Number("40") + 4); // Выводит: 44

Если текст — не число, например "привет", Number() вернёт NaN (Not a Number, «не число») — особое значение, которое означает, что текст не был числом. А пустое поле даёт Number(""), то есть 0.