title: HTML Javascript - How to change image dependent on the number
body: <p>I am making a dice game as an assignment for school and i need some help with it.
  So i want to change the image to a dice with 1 or 2 points with javascript depending on the number i get back from Math.random does anyone know how to do this here is my code.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;dice&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="die1" class="dice"&gt;&lt;img src="dice0.png"&gt;&lt;/div&gt;
  
      &lt;div id="die2" class="dice"&gt;&lt;img src="dice0.png"&gt;&lt;/div&gt;
  
      &lt;button onclick="rollDice()"&gt;Roll Dice&lt;/button&gt;
  
      &lt;h2 id="status" style="clear:left;"&gt;&lt;/h2&gt;
  
      &lt;script&gt;
  
      function rollDice() {
          var die1 = document.getElementById("die1");
          var die2 = document.getElementById("die2");
          var status = document.getElementById("status");
          var d1 = Math.floor(Math.random() * 6) + 1;
          var d2 = Math.floor(Math.random() * 6) + 1;
          var diceTotal = d1 + d2;
          die1.innerHTML = d1;
          die2.innerHTML = d2;
          status.innerHTML = "You rolled " + diceTotal+".";
          if(d1 == d2) {
              status.innerHTML += "Doubles! You get a free turn!!";
          } else if (d1 === 3) {
              status.innerHTML += "half life 3 confirmed";
          } else if (d2 === 3)  {
              status.innerHTML += "Half Life 3 confirmed";
          } else if (d1 === 1) {
  
          }
  
      }
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>