Travailler avec les champs de texte en JavaScript
Maintenant, nous allons apprendre à récupérer le texte
des utilisateurs de notre site. Pour cela,
le HTML fournit une balise spéciale input,
qui représente un champ de texte pour la saisie
de données.
<input>
Cette balise possède un attribut spécial value,
qui définit le texte initial qui sera affiché
dans l'input au chargement de la page :
<input value="text">
L'utilisateur de notre site, après être arrivé sur
la page, peut modifier le texte de l'input.
Dans ce cas, si nous avons une variable contenant
une référence vers cet input, la propriété value
de cette variable contiendra toujours la valeur
actuelle du texte de l'input.
Essayons en pratique. Supposons que nous ayons un input
avec l'attribut value :
<input id="elem" value="text">
Récupérons la référence vers cet input dans une variable :
let elem = document.querySelector('#elem');
Et maintenant, affichons à l'écran le texte actuel de l'input :
console.log(elem.value);
Et maintenant, modifions le texte de l'input par un autre :
elem.value = 'new text';
Un input et un bouton sont donnés. Lors du clic sur le bouton, inscrivez un texte quelconque dans l'input.
Un input, un paragraphe et un bouton sont donnés. Lors du clic sur le bouton, inscrivez dans le paragraphe le texte de l'input.
Deux inputs et un bouton sont donnés. Dans le premier input, l'utilisateur saisit un nombre. Lors du clic sur le bouton, inscrivez dans le deuxième input le carré du nombre saisi.
Deux inputs et un bouton sont donnés. Lors du clic sur le bouton, inscrivez dans le premier input la valeur du deuxième input, et dans le deuxième input - la valeur du premier. Votre code doit fonctionner de manière universelle, pour n'importe quelles valeurs des inputs.
5 inputs, un paragraphe et un bouton sont donnés. Des
nombres sont saisis dans les inputs. Lors du clic sur le bouton,
inscrivez la moyenne arithmétique des nombres saisis dans le paragraphe.
