Aide afficher image générée par javascript dans table html

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
magicvince
Messages : 1
Enregistré le : 17 nov. 2020, 18:57

Aide afficher image générée par javascript dans table html

Message par magicvince » 17 nov. 2020, 19:14

Bonjour à tous,
Je suis novice en programmation html et javascript, mais si on m'explique lentement, je devrias comprendre :D
Je me suis inscrit sur ce forum car je n'ai pas trouvé la solution à mon problème.
Je m'excuse par avance si mon vocabulaire n'est pas hyper précis.
Je souhaite créer un document outil qui affiche de façon aléatoire une série de 5 images .jpg tirées au hasard dans 5 dossiers (qui contiennent une cinquantaine de photos).
Je me suis donc tourné vers une page html qui tournera en local.
J'ai réussi après quelques recherches à générer mes 5 images.jpg de façon aléatoire grâce à javascript.
Je voudrais maintenant les placer dans un tableau (table) dans mon document html afin de mettre un petit habillage : titre, commentaire etc. et pouvoir les poitionner comme je le souhaite sur différentes lignes.

Le problème que je rencontre c'est que je ne sais pas comment nommer l'image qui a été générée par javascript afin qu'elle soit affichée dans le table(au) html.

Voici où j'en suis :
mon fichier html

<HEAD>

<meta content="fr-ch" http-equiv="Content-Language">

<link href="style.css" rel="stylesheet" type="text/css">

</HEAD>

<body>

<h1> Situation </h1>

<div id="container">
<script type="text/javascript">

var imgA = document.createElement("img");
var randommoment = Math.floor((Math.random() * 7) + 1); // random entre 1 et 7
imgA.src = "moment/" + "moment" + randommoment + ".jpg" ;
imgA.classList.add('maclasse');

var imgB = document.createElement("img");
var randomautonomie = Math.floor((Math.random() *5) + 1); // random entre 1 et 5
imgB.src = "autonomie/" + "autonomie" + randomautonomie + ".jpg";
imgB.classList.add('maclasse');

var imgC = document.createElement("img");
var randomlieu = Math.floor((Math.random() *8) + 1); // random entre 1 et 8
imgC.src = "lieu/" + "lieu" + randomlieu + ".jpg";
imgC.classList.add('maclasse');

var imgD = document.createElement("img");
var randomsituation = Math.floor((Math.random() *19) + 1); // random entre 1 et 19
imgD.src = "situation/" + "situation" + randomsituation + ".jpg";
imgD.classList.add('maclasse');

var imgE = document.createElement("img");
var randomprofil = Math.floor((Math.random() *12) + 1); // random entre 1 et 12
imgE.src = "profil/" + "profil" + randomprofil + ".jpg";
imgE.classList.add('maclasse');

document.getElementById('container').appendChild(imgA);
document.getElementById('container').appendChild(imgB);
document.getElementById('container').appendChild(imgC);
document.getElementById('container').appendChild(imgD);
document.getElementById('container').appendChild(imgE);

</script></div>

</BODY>


Mon css :
.maclasse{
width:300px;

}

h1
{
font-size : 14 px;
face :georgia;
color: #090;

text-align: center;
margin-top: 0px;
}

Merci par avance pour votre aide, votre patience et votre pédagogie.

Avatar du membre
webmaster
Administrateur du site
Messages : 396
Enregistré le : 28 févr. 2017, 15:19

Re: Aide afficher image générée par javascript dans table html

Message par webmaster » 17 nov. 2020, 19:53

Bonjour,

Le sujet est bien exposé.
Il manque simplement la structure des images.
Je suppose qu'elles ne se nomment pas simplement moment1.jpg ... moment50.jpg
Sinon, il suffit de les renommer et cela devrait fonctionner (en vérifiant simplement le chemin complet du répertoire des images)
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre