Textfelder

Damit der Nutzer etwas eintippen kann, benutzt eine Seite das Element input, ein Feld zum Hineinschreiben. Es hat kein schließendes Tag:

<input id="farbe">

Was im Feld steht, ist in seiner Eigenschaft value. Meistens liest du sie, wenn der Nutzer auf einen Button klickt:

const farbeEingabe = document.querySelector("#farbe");
const zeigenButton = document.querySelector("#zeigen");
const antwort = document.querySelector("#antwort");

zeigenButton.addEventListener("click", function () {
    antwort.textContent = `Deine Lieblingsfarbe ist ${farbeEingabe.value}.`;
});

Lies value im Handler, im Moment des Klicks. Wenn die Seite geladen wird, ist das Feld noch leer. Mit const farbe = farbeEingabe.value; am Anfang des Skripts wäre farbe also immer ein leerer Text, "".

value ist immer Text, auch wenn der Nutzer Ziffern tippt, und auch in einem Feld für Zahlen, <input type="number">. Und du weißt, dass "40" + 4 gleich "404" ist. Um mit dem Wert zu rechnen, wandle ihn mit Number() in eine Zahl um:

console.log("40" + 4);         // Gibt aus: 404
console.log(Number("40") + 4); // Gibt aus: 44

Wenn der Text keine Zahl ist, zum Beispiel "hallo", gibt Number() NaN (Not a Number) zurück, einen besonderen Wert, der bedeutet, dass der Text keine Zahl war. Und ein leeres Feld ergibt Number(""), also 0.