Menu

Incorporer de l'HTML dans un code Javascript

- - Dernière réponse :  Artof - 5 déc. 2018 à 12:42
Bonjour, je bloque pas mal sur un exercice actuellement: On a a notre disposition une page HTML dont le <body> est vide: il y a juste un identificateur ("b") et une commande qui fait en sorte qu'un programme JavaScript se lance des que la page est chargée en totalité.

Cette page JS doit faire en sorte de dessiner un échiquier sur la page HTML: je sais qu'il faut pour cela utiliser la fonction <table> mais c'est le fond qui m'intrigue. En effet, après avoir déclaré la variable b=document.getElementByID("d"); je ne sais pas comment écrire la page HTML au fur et a mesure avec une boucle for. On a vu seulement pour l'instant la fonction b.innerHTML="..."; mais si je stocke des données dans cette variable, par exemple les balises <table> et <tr>, puis que je modifie la page ensuite via la boucle for en faisant b.innerHTML += ..., les modifications antérieures sont comme effacées.
Quelqu'un aurait une solution a mon problème ?
Afficher la suite 

Votre réponse

1 réponse

Messages postés
23588
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
0
Merci
Bonjour,

Pour "ajouter" du contenu à un élément, tu peux utiliser la méthode append
https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild

Mais bon.. rien ne t'empèche de construire tout ton html puis à la fin de l'envoyer avec .innerHTML

var b = document.getElementByID("d");
var a;
a = " Bonjour,<br>";
for(var i=0; i<=10 ;$++){
  a += " nombre : "+i;
}

b.innerHTML= a;


Cordialement, 
Jordane                                                                 
Max747
Messages postés
75
Date d'inscription
vendredi 11 juillet 2014
Dernière intervention
11 décembre 2018
-
Bonjour,
J'aimerai connaître la signification de cette ligne:
var a;

Merci.
jordane45
Messages postés
23588
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 décembre 2018
-
le mot clé "var" sert à initialiser une variable.
J'aurais pu remplacer
var a;
a = " Bonjour,<br>";

directement par
var a = " Bonjour,<br>";
Bonjour, je vous recommande de commencer par là:
https://www.qwant.com/?client=ext-firefox-sb&q=les+bases+de+javascript&webext=5.0
Au moins le lire(une ou plusieurs des réponses), pratiquer encore mieux.
La manipulation du contenu HTML par JavaScript est le but la plupart du temps du JavaScript, directement ou indirectement.

Plus précisément vous pouvez avoir toutes les réponses ici :
https://www.w3schools.com/jsref/default.asp
Les réponses mais c'est à vous de trouver les bonnes questions ^^

Comme ici :
" je sais qu'il faut pour cela utiliser la fonction <table> "
Euh moi je ferais pas comme ça mais c'est possible, table n'est pas une fonction mais une balise HTML(il n'existe pas de fonctions en HTML comme on l'entend en programmation, cela porte à confusion et indique clairement que vous n'êtes pas encore au point en HTML ce qui est assez rédhibitoire pour utilisez JavaScript ;) .

Sans utiliser la balise table un exemple incomplet:


function casesHorizontale(n=8){
var ligne='';//-- initialiser vide
for(var i=0, i++,i<n-1){
ligne+='<div class='case_echiquier'></div>'/*ajoute dans une boucle se répétant n fois des cases avec l'élément HMLT (ou balise) div*/
}
return ligne;
/* la fonction "casesHorizontale" va fournir l'intégralité d'une ligne, de 8 colonnes si on n'indique pas d'autres nombres de cases en argument/paramètre de fonction*/

}


avec le CSS suivant appliqué aux HTML
#plateau_echec{
text-align:left;
width:100%;
margin:0;padding:0;/* supprime les marges existantes*/
}
/* qui définit la taille */
.case_echiquier{
margin:0;padding:0;/* supprime les marges*/
width:12,5%;/* 12,5% égale 1/8 soit la taille d'une case dans un plateau pour qu'il y ait 8 cases */
height:12.5%;
border:1px solid #000;/* affiche un contour noir de 1 pixel pour chaque case*/
}


Ce n'est qu'un début à adapter et compléter au reste(pour qu'il y ait 8 lignes de 8 cases) et bien évidemment colorer une case sur 2 en noir ou blanc(pair ou impair sur chaque ligne, il y a une pseudo classe css comme 'odd' qui peut aider.)
Commenter la réponse de jordane45