menu

changer un texte dans une page

Le texte de départ

Cliquer pour changer

Explication du script

<p id="p1">Le texte de départ</p> Donne une une idendtité au paragraphe (p1) ce qui permettra d'y accèder par la fonction getElementById
<p onClick="change()"> Cliquer pour changer </p> Appelle la fonction change() quand on clique sur ce paragraphe
<script>
function change(){
	var nouveauTexte=prompt("texte de remplacement ?");
	document.getElementById('p1').firstChild.nodeValue=nouveauTexte;
	}
</script>
prompt() ouvre une fenètre de saisie dont le résultat est stocké dans nouveauTexte

Un peu de théorie pour la suite de l'explication :
Tutoriel : DOM (Document Object Model)
La srtucture d'une page HTML est arborescente.
Chaque élément HTML est un noeud avec un ou plusieurs fils.
Les textes sont les valeurs de «noeuds texte»
Le texte du paragraphe (avant la première balise qui définirait un nouveau noeud, et le second fils) est le premier fils du noeud paragraphe

document.getElementById('p1') renvoie l'élément de document dont l'identité est p1
document.getElementById('p1').firstChild est le premier fils (noeud de texte) du paragraphe.
document.getElementById('p1').firstChild.nodeValue en est la valeur.