Aide afficher image générée par javascript dans table html
Posté : 17 nov. 2020, 19:14
Bonjour à tous,
Je suis novice en programmation html et javascript, mais si on m'explique lentement, je devrias comprendre
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.
Je suis novice en programmation html et javascript, mais si on m'explique lentement, je devrias comprendre
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.