Werken met tekstvelden in JavaScript
Nu gaan we leren hoe we tekst
van gebruikers van onze website kunnen verkrijgen. Hiervoor
is er in HTML een speciale tag input voorzien,
die een tekstveld voor het invoeren van
gegevens vertegenwoordigt.
<input>
Deze tag heeft een speciaal attribuut value,
dat de initiële tekst instelt, die zal staan
in de input bij het openen van de pagina:
<input value="text">
De gebruiker van onze website kan na het openen van
de pagina de tekst van de input wijzigen.
Als we een variabele hebben die een
referentie naar deze input bevat, dan zal de eigenschap value
van deze variabele altijd de huidige
waarde van de inputtekst bevatten.
Laten we het in de praktijk proberen. Stel we hebben een input
met het attribuut value:
<input id="elem" value="text">
Laten we de referentie naar deze input in een variabele krijgen:
let elem = document.querySelector('#elem');
En laten we nu de huidige tekst van de input op het scherm tonen:
console.log(elem.value);
En laten we nu de tekst van de input naar een andere wijzigen:
elem.value = 'new text';
Gegeven een input en een knop. Schrijf bij het indrukken van de knop een willekeurige tekst in de input.
Gegeven een input, een paragraaf en een knop. Bij het indrukken van de knop schrijf je in de paragraaf de tekst uit de input.
Gegeven twee inputs en een knop. In de eerste input voert de gebruiker een getal in. Bij het indrukken van de knop schrijf je in de tweede input het kwadraat van het ingevoerde getal.
Gegeven twee inputs en een knop. Bij het indrukken van de knop schrijf je in de eerste input de waarde van de tweede input, en in de tweede input - de waarde van de eerste. Je code moet universeel werken, voor elke waarde van de inputs.
Gegeven 5 inputs, een paragraaf en een knop. In
de inputs worden getallen ingevoerd. Bij het indrukken van de knop
schrijf je het rekenkundig gemiddelde van de ingevoerde
getallen in de paragraaf.
