Nå skal vi lære hvordan vi kan bruke <input>-felt og knapper sammen med JavaScript! Dette lar brukeren skrive inn tekst eller tall som du kan bruke i koden din.
input og submit – brukerinteraksjon
Et <input>-felt lar brukeren skrive inn tekst, og en <button> eller <input type='submit'> kan brukes til å sende eller bruke denne informasjonen.
Loading editor...
let input = document.getElementById("nameInput");
let button = document.getElementById("greetButton");
let greeting = document.getElementById("greeting");
button.addEventListener("click", function() {
let name = input.value;
if (name.trim() === "") {
greeting.textContent = "Skriv inn navnet ditt først!";
} else {
greeting.textContent = "Hei, " + name + "! Hyggelig å møte deg 😄";
}
});Her bruker vi input.value for å hente teksten brukeren har skrevet. Når knappen klikkes, viser vi en personlig hilsen. Prøv å skrive navnet ditt og klikke på knappen!
Vi kan kombinere flere input-felter for å lage små verktøy. Her er en mini-kalkulator som legger sammen to tall!
Loading editor...
let num1 = document.getElementById("num1");
let num2 = document.getElementById("num2");
let button = document.getElementById("sumButton");
let result = document.getElementById("result");
button.addEventListener("click", function() {
let a = Number(num1.value);
let b = Number(num2.value);
if (isNaN(a) || isNaN(b)) {
result.textContent = "Skriv inn to tall først!";
} else {
result.textContent = "Summen er: " + (a + b);
}
});🎯 Tips: Prøv å skrive inn bokstaver i stedet for tall. Hva skjer da? (Hint: isNaN() betyr "is Not a Number").
La oss lage en liten lek: du skriver en hemmelig melding i et felt, og den vises bare når du trykker på en knapp!
Loading editor...
let secretInput = document.getElementById("secretInput");
let revealButton = document.getElementById("revealButton");
let secretText = document.getElementById("secretText");
revealButton.addEventListener("click", function() {
let message = secretInput.value;
if (message.trim() === "") {
alert("Skriv noe først!");
} else {
secretText.style.display = "block";
secretText.textContent = "Din hemmelige melding: " + message;
}
});Dette eksemplet viser hvordan du kan endre synligheten til et element med style.display. Ganske kult, ikke sant?