Function wont switch out images when trying to use a random number

Question

I'm working on a slot machine game where i take 3 random numbers and assign them to different images.

However, I can't get my images to display when you click the button to play the game.

I have the stock images there but when you click SPIN it should replace them with new images based on random numbers.

How can I get the new images to display?.

My code:

    <html>
    <head>
      <title>Slots</title>
      <link href="../style.css" type="text/css" rel="stylesheet">
      <script type="text/javascript" src="random.js">
        function spinslots() {
          var lemon = document.getElementById('lemon.jpg');
          var donut = document.getElementById('donut.jpg');
          var cherry = document.getElementById('cherry.jpg');
          var bar = document.getElementById('bar.jpg');

          var random_1;
              random_1= Math.floor((Math.random()*4 )+ 1);
          var random_2;
              random_2 = Math.floor((Math.random()*4 )+ 1);
          var random_3;
              random_3 = Math.floor((Math.random()*4 )+ 1);

          if (random_1 == 1) {
            document.getElementById("slot_1").src = "lemon.jpg";
          }
          if (random_1 == 2) {
            document.getElementById("slot_1").src = "donut.jpg";
          }
          if (random_1 == 3) {
            document.getElementById("slot_1").src = "cherry.jpg";
          }
          if (random_1 == 4) {
            document.getElementById("slot_1").src = "bar.jpg";
          }

          if (random_2 == 1) {
            document.getElementById("slot_2").src = "lemon.jpg";
          }
          if (random_2 == 2) {
            document.getElementById("slot_2").src = "donut.jpg";
          }
          if (random_2 == 3) {
            document.getElementById("slot_2").src = "cherry.jpg";
          }
          if (random_2 == 4) {
            document.getElementById("slot_2").src = "bar.jpg";
          }

          if (random_3 == 1) {
            document.getElementById("slot_3").src = "lemon.jpg";
          }
          if (random_3 == 2) {
            document.getElementById("slot_3").src = "donut.jpg";
          }
          if (random_3 == 3) {
            document.getElementById("slot_3").src = "cherry.jpg";
          }
          if (random_3 == 4) {
            document.getElementById("slot_3").src = "bar.jpg";
          }

          if (random_1 == random_2 == random_3) {
            alert("Congradulations, you won!");
          }
        }     
      </script>
    </head>

    <body>
      <h1>Test your luck! Click the SPIN button</h1>
      <p><button value="Spin" onclick="spinslots();"> SPIN </button></p>
      <p>
        <div class="SlotDiv" id="div_1"><image id="slot_1" src="images/lemon.jpg"></image></div>
        <div class="SlotDiv" id="div_2"><image id="slot_2" src="images/cherry.jpg"></image></div>
        <div class="SlotDiv" id="div_3"><image id="slot_3" src="images/bar.jpg"></image></div>
      </p>

      <p>Credits: <div class="OutputBox" type="numeric" id="Credits" size="10">20</div></p>
    
  </body>
</html>

Your script tag has both a src attribute and content. Is this intentional? Do you get any errors on your browser console when running the code? — Jonas Høgh, Oct 29 '18 at 04:58
I was told to use it this way, now that i checked the console however it gives me these errors: Failed to load resource: the server responded with a status of 404 (Not Found) 2slots.html:92 Uncaught ReferenceError: spinslots is not defined at HTMLButtonElement.onclick (slots.html:92) — Mitchell, Oct 29 '18 at 05:17
Are you sure you have the image paths set correctly? Is it "bar.jpg" or "images/bar.jpg"? — Jonas Høgh, Oct 29 '18 at 05:42
would that go in the if statements after the src = " " ? - I think you where right about the images/bar.jpg as that is how the path is set, but i changed it to that and it still does not appear to be working. — Mitchell, Oct 29 '18 at 05:51

lucascaro · Answer 1 · 2018-10-29T07:53:46.883

A few things you can improve about the code:

Don't use both src and content in your <script> tag, as this won't work.
Your getElementById calls should use the value from the id attribute, not the src.
You can set the initial value in the declaration line. i.e. var random_1 = Math.floor(...
Use === for comparing values
a === b === c should be a === b && b === c (thanks @jonas-h)
You should reduce code duplication, the code has the same logic repeated multiple times.
You should use <img> not <image> since the latter is obsolete
Since <img> elements have no content, you can use the short version to close them: <img src="..." />
<p> tags cannot contain block (div) elements inside, use divs instead.

Example of refactored code:

function spinslots() {
  const images = [
    // lemon:
    'https://cdn.pixabay.com/photo/2012/04/03/15/07/lemon-25244_960_720.png',
    // donut:
    'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Simpsons_Donut.svg/1024px-Simpsons_Donut.svg.png',
    //cherry:
    'https://cdn.pixabay.com/photo/2013/07/13/10/23/cherries-157113_960_720.png',
    //bar:
    'https://cdn.pixabay.com/photo/2012/04/26/20/00/jackpot-42993_960_720.png',
    ];
    const random_1 = Math.floor(Math.random() * 4);
    const random_2 = Math.floor(Math.random() * 4);
    const random_3 = Math.floor(Math.random() * 4);

    document.getElementById("slot_1").src = images[random_1];
    document.getElementById("slot_2").src = images[random_2];
    document.getElementById("slot_3").src = images[random_3];
   
    if (random_1 === random_2 && random_1 === random_3) {
      alert("Congratulations, you won!");
    }
  }

.SlotDiv {
  display: inline-block;
  width: 100px;
  height: 100px;
}
.SlotDiv img {
  width: 100%;
}

<html>
<head>
  <title>Slots</title>
</head>

<body>
  <h1>Test your luck! Click the SPIN button</h1>
  <div>
    <button value="Spin" onclick="spinslots();"> SPIN </button>
  </div>
  <div>
    <div class="SlotDiv" id="div_1">
      <img id="slot_1" src="images/lemon.jpg" />
    </div>
    <div class="SlotDiv" id="div_2">
      <img id="slot_2" src="images/cherry.jpg" />
    </div>
    <div class="SlotDiv" id="div_3">
      <img id="slot_3" src="images/bar.jpg" />
    </div>
  </div>

  <p>Credits: <span class="OutputBox" type="numeric" id="Credits" size="10">20</span></p>
    
  </body>
</html>

Further enhancements:

note that the alert shows before the images change, due to it being executed synchronously. You can delay the message for a better effect.
the images take some time to show in the initial load, you can preload the images to avoid this.

you're welcome - I kept playing and I couldn't win, sooo frustrating ;-) — Jonas Høgh, Oct 29 '18 at 08:49
thanks for the help! turns out the entire problem with the code was the script tag, I know its a little longer than what you did but it seems to work fine now, thanks for all the great tips and your help. — Mitchell, Oct 29 '18 at 20:02
Glad to hear you solved it. If this post answered your question you should consider up-voting or accepting the answer, or even posting your own answer and accepting that one! — lucascaro, Oct 29 '18 at 23:53

Function wont switch out images when trying to use a random number

1 Answers1