Affichage d'images entre Javascript et Html sans répétitions

**yomanty17** · 16/07/2019, 14h47

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**javatwister** · 16/07/2019, 15h54

salut,

Si tu veux changer une image, change simplement son attribut src, n'en crée pas une nouvelle...

**javatwister** · 16/07/2019, 16h08

par exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<script>
      function play() {
                document.getElementById("img").src=`carte1/${Math.ceil(Math.random()*6)}.png`;
                }
                
</script>
</head>
<body>
 
<center>
	<img src="https://image.noelshack.com/fichiers/2019/28/5/1562957130-dfgdfg.png"><br><br>
 
	<p id="score">
		<img id="img" alt="image" src = "cartes1/1.png" />
	</p>
 
	<br>
	<button id= "btn" onclick = "play()">Tirer une carte</button>
</center>
 
</body>
</html>

Invité · 16/07/2019, 16h09

Bonjour,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<p><img id="playingcard" src="cartes1/0.png" /></p>
 
<button id="btn" onclick="playCard()">Tirer une carte</button>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"use strict";
function randomCard(){
  return Math.floor(Math.random()*6)+1;
}
const playingcard = document.getElementById('playingcard');
function playCard() {
  var card = randomCard();
 
  if ( card >=1 &&  card <=6 ) {
    playingcard.setAttribute("src","cartes1/"+card+".png"); 
  } else {
    playingcard.setAttribute("src","cartes1/0.png")
  } 
}

N.B. Pour le "score" (?), c'est une autre histoire... que tu ne nous a pas racontée...

[EDIT] J'ai écrit ce code AVANT de voir celui de javatwister, qui est sensiblement le même (sur le principe)... en beaucoup plus "condensé" !

Le mien est plus... didactique et "accessible" à un débutant.

**yomanty17** · 16/07/2019, 19h27

Merci pour vos réponses si rapides !

Vous m'avez vachement aidé, j'ai réussi a comprend pas mal de choses.

Passez une bonne soirée.

Affichage d'images entre Javascript et Html sans répétitions

JavaScript

Discussions similaires

Partager

Partager