Incorporer de l'HTML dans un code Javascript

Fermé

WilliamBach - 1 déc. 2018 à 15:16
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 ?

A voir également:

Incorporer de l'HTML dans un code Javascript
Code asci - Guide
Editeur html - Télécharger - HTML
Code de déverrouillage oublié - Guide
Code puk bloqué - Guide
Code blocks free - Télécharger - Langages

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
Modifié le 1 déc. 2018 à 17:38

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;

Max747 Messages postés 258 Date d'inscription vendredi 11 juillet 2014 Statut Membre Dernière intervention 11 janvier 2024
4 déc. 2018 à 09:15

Bonjour,
J'aimerai connaître la signification de cette ligne:

var a;

Merci.

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
4 déc. 2018 à 09:18

le mot clé "var" sert à initialiser une variable.
J'aurais pu remplacer

var a;
a = " Bonjour,<br>";

directement par

var a = " Bonjour,<br>";

Artof
Modifié le 5 déc. 2018 à 13:05

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.)

Discussions similaires

Code de renvoi d'appel : Ooredo, Mobilis...

Espace en HTML

Acces à snapchat temporairement désactivé

Discussions similaires

Newsletters