| Accueil | table JavaScript | index JavaScript | précédent | suivant |

Création dynamique d'objets DOM (suite2)

Voici, inclus dans le fichier Jscript33.js le code qui affiche les paragraphes créés. La couleur et la taille des polices de caractères est obtenue de manière aléatoire à partir de tables contenant des valeurs prédéterminées.

// fichier Jscript33.js
// création et suppression dynamique d'éléments "p"

var count=0; // comptage des éléments créés
var elem; // dernier élément créé

// tableau des couleurs du texte
var colors=new Array("rgb(100,0,0)", "rgb(0,150,0)", "rgb(0,0,150)", "rgb(200,200,0)" );

// tableau des tailles de police
var sizes=new Array(8, 10, 12, 14);

function random(a, b)
{

// retourne un nombre aléatoire compris entre a et b
var x=a+Math.random()*(b-a);
return Math.round(x);

}

function createElem()
{

// supprimer l'élément précédent
if(count > 0) cadre1.removeChild(elem);
count++;
// création d'un élément "p"
var sizeNo=random(0, 3); // index aléatoire dans la table sizes
var colorNo=random(0,3); // index aléatoire dans la table colors
elem=document.createElement("p");
elem.style.fontFamily="Verdana";
elem.style.fontSize=sizes[sizeNo].toString()+"pt";
elem.style.color=colors[colorNo];
elem.innerHTML="Ceci est un nouveau paragraphe créé dynamiquement<br/>Il porte le numéro "+count.toString();

// attacher le paragraphe au cadre d'affichage
cadre1.appendChild(elem);

}


suivant