Comment changer un texte en cliquant sur un bouton HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-06-03 12:00:11

Question

Comment faire pour changer un texte en cliquant sur un bouton HTML ?

Réponse

Pour changer un texte en cliquant sur un bouton HTML, vous pouvez créer une fonction JavaScript et utiliser la propriété element.innerHTML.

Dans la fonction on spécifie la valeur du nouveau texte puis on identifie la balise où l'afficher avec la méthode document.getElementById() ; enfin on utilise la propriété element.innerHTML pour afficher le nouveau texte.

Voici un exemple pour changer le texte contenu dans une balise <div> lorsqu'on clique sur un bouton :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment changer un texte en cliquant sur un bouton HTML ?</title>
</head>  
<body>
<div id="texte">Un texte</div>
<br>
<button onclick="changerTexte();">Changer le texte</button>
<script>
function changerTexte() {
var nouveauTexte = "Un nouveau texte";
document.getElementById("texte").innerHTML = nouveauTexte;
}
</script>
</body>
</html>

Astuce : Si vous remplacez document.getElementById("texte").innerHTML = nouveauTexte; par document.getElementById("texte").innerHTML += nouveauTexte; le nouveau texte sera affiché à la suite du texte initial.