Javascript débutant- jeu de dé aléatoire

Programmation
Tags: #<Tag:0x00007f50a00340d8>
#1

Bonjour,
je suis sur un petit projet de page web (sur Mozilla Thimble) en lien avec une BD, pour cette occasion j’apprends un peu de HTML CSS et javascript mais je suis vraiment tout débutant. Je suis en train d’essayer de faire marcher une fonction où il s’agit de cliquer sur un bouton sous lequel est affichée l’image d’un dé et de faire varier aléatoirement le résultat du dé.
J’ai donc créé 6 versions de l’image du dé et je voudrais les faire correspondre au résultat de la fonction Math.random() que j’ai utilisée. Mais rien à faire ça ne marche pas, les images ne s’affichent pas dans le paragraphe ou je veux les envoyer. Je pense que je fais une erreur dans la manière d’accéder à l’image dans le script ou je sais pas…

Voici ce qu’il y a d’écrit dans mon document :
et voici le lien du projet : https://thimbleprojects.org/codnpix/462165/

 <...>        

     <button onclick = "randomDice()"> jouer </button>
            
            <p id="score"><img src = "dice1.bmp"></p>
    <...>
         <script>
              var roll = randomDice();
              var diceImage;

              function randomDice(min, max) {
                return Math.floor(Math.random()*(max - min)) + min;

                if (roll === 1) {
                  diceImage = "<img src='dice1.bmp'>"; }
                else if (roll === 2) {
                  diceImage = "<img src='dice2.bmp'>"; }
                else if (roll === 3) {
                  diceImage = "<img src='dice3.bmp'>"; }
                else if (roll === 4) {
                  diceImage = "<img src='dice4.bmp'>"; }
                else if (roll === 5) {
                  diceImage = "<img src='dice5.bmp'>"; }
                else if (roll === 6) {
                  diceImage = "<img src='dice6.bmp'>"; }
                else { diceImage = "oups!"}
               
                document.getElementById("score") = diceImage;
              }
            </script>

J’ai essayé aussi en utilisant la méthode document.createElement(“IMG”) mais rien à faire je n’y arrive pas non plus et aucun des éléments de réponse que j’ai pu trouver n’a fonctionné, je ne suis arrivé à rien avec aucune méthode et je commence vraiment à craquer :smile: ! Je pense qu’il me manque quelques connaissances élémentaires mais je ne mets pas le doigt dessus…
Un grand merci d’avance si quelqu’un peut m’éclairer sur mes erreurs !

#2

J’y connais rien, donc ce que je vais dire est peut être nase.
Mais là, tu affectes une chaine de caractére à un élément du DOM qui est un objet image (l’objet document.getElementById(“score”) ).
Je pense qu’il faut faire appel à une méthode qui modifie l’attribut src de l’image, ou que tu modifies la propriété.
Genre, ta chaine de caractére diceImage doit être l’url compléte de l’image, et ensuite, tu l’affectes au src avec:
document.getElementById("score").src = diceImage;

#3

Merci pour ta réponse ! J’ai corrigé ça mais ça ne marche toujours pas. J’ai essayé de lancer le script avec la console (f12) ouverte et je reçois un message d’erreur lié à “return” (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Erreurs/Stmt_after_return). Donc je suppose qu’il doit y avoir un autre problème dans la syntaxe de ma fonction randomDice(), j’ai essayé de mettre le return à la fin mais ça ne change rien (plutôt pire en terme de message d’erreur…).
Je commence à avoir quelques résultat visibles en utilisant plutôt createElement et appendChild, mais je ne sais pas comme y intégrer la fonction Math.random()…
Je vais continuer à chercher à chercher et à saigner un peu du cerveau ^^, et en attendant je suis preneur de toutes remarques.

#4

J’ai finalement réussi à m’en sortir !

Histoire de partager, voici à quoi ressemble mon script :

<...>

 <button id= "btn" onclick = "play(); disable()"> jouer </button>
    
    <p id="score"></p>

<...>

<script>
      function play() {
        var x = document.createElement("IMG");
        var roll = roll();
        function roll(){
       return Math.floor(Math.random()*6)+1;}
        
        if (roll === 1) {
          x.setAttribute("src","dice1.bmp"); 
        }
        else if (roll === 2) {
          x.setAttribute("src","dice2.bmp");
        }
        else if (roll === 3) {
          x.setAttribute("src","dice3.bmp");
        }
        else if (roll === 4) {
          x.setAttribute("src","dice4.bmp");
        }
        else if (roll === 5) {
          x.setAttribute("src","dice5.bmp");
        }
        else if (roll === 6) {
          x.setAttribute("src","dice6.bmp");
        }
        else { x.setAttribute("src","dice1.bmp")
        } 
        
        document.getElementById('score').appendChild(x);
      }
   
      function disable() { document.getElementById('btn').disabled=true;
                         }
    </script>

et le lien du projet pour tester ce que ça donne… https://thimbleprojects.org/codnpix/462165/

Même si ça fonctionne mieux je reste preneur de tout conseil.
Merci !

#5

Salut !

Tu peux faire beaucoup plus simple !

function play() {
  var x = document.createElement("IMG");
  var roll = Math.floor(Math.random()*6)+1;

  x.setAttribute("src","dice"+roll+".bmp")
  document.getElementById('score').appendChild(x);
}
   
function disable() {
  document.getElementById('btn').disabled=true;
}
#6

Salut ! Eh oui ! J’y avais pas pensé, ça parait évident maintenant :slight_smile: !