Arbete med textfält i JavaScript

Nu ska vi lära oss att få text från användarna av vår webbplats. För detta finns det en speciell tagg input i HTML, som representerar ett textfält för inmatning av data.

<input>

Denna tagg har ett speciellt attribut value, som anger den initiala texten som kommer att stå i inputfältet när sidan laddas:

<input value="text">

Användaren av vår webbplats kan efter att ha kommit till sidan ändra texten i inputfältet. Under detta, om vi har en variabel som innehåller en referens till denna input, kommer egenskapen value i denna variabel alltid att innehålla det aktuella värdet av texten i inputfältet.

Låt oss prova i praktiken. Låt oss säga att vi har ett inputfält med attributet value:

<input id="elem" value="text">

Låt oss få en referens till detta inputfält i en variabel:

let elem = document.querySelector('#elem');

Och nu låt oss skriva ut den aktuella texten i inputfältet:

console.log(elem.value);

Och nu låt oss ändra texten i inputfältet till en annan:

elem.value = 'new text';

Givet ett inputfält och en knapp. Vid klick på knappen, skriv någon text i inputfältet.

Givet ett inputfält, ett stycke och en knapp. Vid klick på knappen, skriv i stycket texten från inputfältet.

Givet två inputfält och en knapp. I det första inputfältet matar användaren in ett nummer. Vid klick på knappen, skriv i det andra inputfältet kvadraten på det inmatade numret.

Givet två inputfält och en knapp. Vid klick på knappen, skriv i det första inputfältet värdet från det andra inputfältet, och i det andra inputfältet - värdet från det första. Din kod bör fungera universellt, för vilka värden som helst i inputfälten.

Givet 5 inputfält, ett stycke och en knapp. I inputfälten matas nummer in. Vid klick på knappen, skriv det aritmetiska medelvärdet av de inmatade numren i stycket.