Working with text fields in JavaScript

Now we will learn how to get text from users of our site. To do this, HTML provides a special tag input, which is a text field for data entry.

<input>

This tag has the special value attribute that specifies the initial text that will be written in the input when entering the page:

<input value="text">

The user of our site after entering the page can change the text of the input. Moreover, if we have a variable containing a reference to this input, then the value property of this variable will always contain the current value of the input text.

Let's try it in practice. Let us have an input with the attribute value:

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

Get a reference to this input in a variable:

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

And now we will display the current input text:

console.log(elem.value);

And now change the text of the input to another:

elem.value = 'new text';

Given an input:

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

Make a button, clicking on which will display the current input text. After entering the page, click on the button to see the current input text, then edit the text in the input and click the button again. Make sure the new input text is displayed.

Given an input and a button. On pressing the button, write some text to the input.

Given an input, a paragraph, and a button. By pressing the button, write the text from the input into the paragraph.

Given two inputs and a button. The user enters a number into the first input. By pressing the button, write the square of the entered number into the second input.

Given two inputs and a button. By pressing the button, write the value of the second input into the first input, and the value of the first input into the second input. Your code should work universally, for any input values.

Given 5 inputs, a paragraph, and a button. Numbers are entered into the inputs. By pressing the button, write down the arithmetic mean of the entered numbers into a paragraph.

enru