Incorporer de l'HTML dans un code Javascript

WilliamBach -  
 Artof -
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 ?
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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;


0
Max747 Messages postés 258 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour,
J'aimerai connaître la signification de cette ligne: 
var a;

Merci.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
le mot clé "var" sert à initialiser une variable.
J'aurais pu remplacer 
var a;
a = " Bonjour,<br>";

directement par 
var a = " Bonjour,<br>";
0
Artof
 
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.)
0