Mettons que tu as cet input :
<input type="text" id="textePrincipal" />Et tu as une div qui permet de voir le texte écrit dans cet input, mais en ROSE.
<div id="rose" style="color:pink"></div>Maintenant ce qu'on veut, c'est CAPTURER en temps réel ce qui se passe dans input et le "transvaser" dans la div rose.
Pour ça il faut du JavaScript, mais il se trouve que le JavaScript ne sait pas par magie que ces bouts de HTML existent. Il faut lui dire où les trouver.
Pour ça on utilise querySelector, qui permet de trouver l'élément html via son id, sa classe, et de le manipuler via du JavaScript en le stockant dans une variable.
const jsInput = document.querySelector("#textePrincipal");
const jsRose = document.querySelector("#rose");Maintenant, à chaque fois que un truc change dans jsInput, on veut qu'il arrive dans jsRose.
Pour ça, on va "écouter" les changements avec un outil appelé "EventListener" qui, c'est bien pratique, nous a été donné gratos dans jsInput quand on l'a créé.
Un eventListener nous demande quand réagir, et quoi faire quand il détecte un changement.
On va lui demander de réagir à chaque fois que l'utilisateur appuie sur une touche ("input"), et d'executer du code (function).
jsInput.addEventListener("input", function() {
// mon futur code
}, false)Tout ce qu'il reste à faire, c'est mettre le texte capturé à chaque changement dans jsRose.
Il se trouve que pour récupérer ce nouveau texte entré par l'utilisateur, il suffit d'utiliser this.value à l'intérieur du bloc de code.
On va donc demander à ce que le "texte interne" (innerText) de jsRose soit this.value.
jsInput.addEventListener("input", function() {
jsRose.innerText = this.value
}, false)(Ne fais pas attention au false à la fin)
Le code final :
const jsInput = document.querySelector("#textePrincipal");
const jsRose = document.querySelector("#rose");
jsInput.addEventListener("input", function() {
jsRose.innerText = this.value
}, false)Une démo est dispo ici : https://codepen.io/Thomasorus/pen/bGOWmMW