Praca z polami tekstowymi w JavaScript

Teraz nauczymy się pobierać tekst od użytkowników naszej strony. W tym celu w HTML przewidziano specjalny znacznik input, reprezentujący pole tekstowe do wprowadzania danych.

<input>

Ten znacznik ma specjalny atrybut value, ustawiający początkowy tekst, który będzie wpisany w inpucie po wejściu na stronę:

<input value="text">

Użytkownik naszej strony po wejściu na stronę może zmienić tekst inputa. Przy tym, jeśli mamy zmienną zawierającą odniesienie do tego inputa, to właściwość value tej zmiennej zawsze będzie zawierać aktualną wartość tekstu inputa.

Spróbujmy w praktyce. Niech mamy input z atrybutem value:

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

Pobierzmy odniesienie do tego inputa do zmiennej:

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

A teraz wyświetlmy na ekranie aktualny tekst inputa:

console.log(elem.value);

A teraz zmieńmy tekst inputa na inny:

elem.value = 'new text';

Dany jest input i przycisk. Po naciśnięciu przycisku wpisz w input jakiś tekst.

Dany jest input, akapit i przycisk. Po naciśnięciu przycisku wpisz w akapit tekst z inputa.

Dane są dwa inputy i przycisk. W pierwszy input użytkownik wprowadza liczbę. Po naciśnięciu przycisku wpisz w drugi input kwadrat wprowadzonej liczby.

Dane są dwa inputy i przycisk. Po naciśnięciu przycisku wpisz w pierwszy input wartość drugiego inputa, a w drugi input - wartość pierwszego. Twój kod powinien działać uniwersalnie, dla dowolnych wartości inputów.

Dane są 5 inputów, akapit i przycisk. W inputy wprowadzane są liczby. Po naciśnięciu przycisku wpisz średnią arytmetyczną wprowadzonych liczb w akapit.