Affichage d'images entre Javascript et Html sans répétitions
Bonjour à tous ! :)
Je viens vers vous car malgré beaucoup de recherches et peu de connaissances, je n'arrive pas à régler certains problème que j'ai rencontré avec javascript.
[Explication du projet]
Je souhaite afficher des cartes (sous forme d'images donc) aléatoirement après que la personne ait appuyé sur un bouton.
J'ai réussi à faire cela et à afficher 6 cartes aléatoirement avec du javascript sur une page Html.
[Mes problèmes]
1) Je voudrais afficher une image avant qu'une personne clique sur le bouton et qu'elle disparaisse une fois le clique effectué. Cela remplacera donc l'image de base par l'image de la première carte tirée.
2) Lorsque je tire une carte actuellement, elle s'affiche parfaitement mais lorsque j'en tire une seconde et ainsi de suite, les cartes s'affichent les unes à coté des autres. Je voudrais que l'image de la nouvelle carte tirée remplace la précédente.
Mon
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <html>
<head>
<script>
function play(n) {
var x = document.createElement("IMG");
var roll = roll();
function roll(){
return Math.floor(Math.random()*6)+1;}
if (roll === 1) {
x.setAttribute("src","cartes1/1.png");
}
else if (roll === 2) {
x.setAttribute("src","cartes1/2.png");
}
else if (roll === 3) {
x.setAttribute("src","cartes1/3.png");
}
else if (roll === 4) {
x.setAttribute("src","cartes1/4.png");
}
else if (roll === 5) {
x.setAttribute("src","cartes1/5.png");
}
else if (roll === 6) {
x.setAttribute("src","cartes1/6.png");
}
else { x.setAttribute("src","cartes1/0.png")
}
document.getElementById('score').appendChild(x);
}
function disable() { document.getElementById('btn').disabled=true;
}
</script>
</head>
<body>
<center><img src="https://image.noelshack.com/fichiers/2019/28/5/1562957130-dfgdfg.png"><br><br><p id="score"><img src = "cartes1/1.png"></p><br><button id= "btn" onclick = "play(1)">Tirer une carte</button></center>
</body>
</html> |
Merci d'avance pour l'aide que vous m'apporterez ! :)
