Dans l'activité précédente, nous avons vu qu'il était possible de créer des balises depuis le code JavaScript. Une fois ces balises créées, il est possible de modifier leur contenu grâce à la fonction "html".
Afin de pouvoir utiliser cette fonction "html", il est nécessaire de "ranger" l'élément "fraichement" créé dans une variable :
var monPara;
monPara=createP("Hello world!");
Modifiez les fichiers ("index.html" et "script.js") comme suit (le fichier "style.css" reste inchangé) :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
script.js
var para;
function setup(){
noCanvas();
para=createP("Vous ne lirez jamais ce texte...");
para.html("car le contenu de la balise p a été modifié !");
}
function draw(){
}
Il est possible d'utiliser des variables afin de rendre la page dynamique
Modifiez le fichier "script.js" comme suit (les fichiers "index.html" et "style.css" restent inchangés) :
script.js
var para;
var compt=0;
function setup(){
noCanvas();
para=createP("Vous avez cliqué "+compt+" fois.");
}
function draw(){
}
function mousePressed(){
compt=compt+1;
para.html("Vous avez cliqué "+compt+" fois.");
}
N.B. Nous venons de voir un exemple d'utilisation de la fonction "html" avec élément de type "p" mais évidemment, la fonction "html" peut être utilisée avec d'autres éléments (div, span,...).