title: How to add images to rock, paper scissors game
body: <p>I want to add some images to my game. When you click the button, it should come up with a image. Would some please advise me or show me how can I do that?</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div style="text-align: center;"&gt;
  &lt;H1&gt;Rock Paper Scissors&lt;/H1&gt;
  &lt;H2&gt;Instructions&lt;/H2&gt;
  &lt;p&gt;Click a button to choose what to throw&lt;/p&gt;
  &lt;p id="buttons"&gt;
      &lt;input type="button" value="Rock" onclick="hand(0);" /&gt;
      &lt;input type="button" value="Paper" onclick="hand(1);" /&gt;
      &lt;input type="button" value="Scissors" onclick="hand(2);" /&gt; 
  &lt;/p&gt;
  &lt;h3&gt;Scoreboard:&lt;/h3&gt;
  &lt;ul id="scoreboard"&gt;
          Wins: &lt;span id="win"&gt;0&lt;/span&gt;
      &lt;br/&gt;
          Losses: &lt;span id="lose"&gt;0&lt;/span&gt;
      &lt;br/&gt;
          Ties: &lt;span id="tie"&gt;0&lt;/span&gt;      
  &lt;/ul&gt;
  </code></pre>
  
  <p>My JavaScript:</p>
  
  <pre><code>var ties = 0;
  var wins = 0;
  var losses = 0;
  
  // randInt returns a random integer between 0 and 2
  function randInt() {return Math.floor(Math.random()*3);}
  
    function msgAlert(msg, player, comp) {
  var outcome = ["Rock", "Paper", "Scissors"];
  
  if (msg === "tie") {
      alert("Tie!\n" + "Player: " + outcome[player] + "\n" + "Computer: " + outcome[comp]);
  }
  
  if (msg === "win") {
      alert("You won!\n" + "Player: " + outcome[player] + "\n" + "Computer: " + outcome[comp]);
  }          
  
  if (msg === "lose") {
      alert("You lost!\n" + "Player: " + outcome[player] + "\n" + "Computer: " + outcome[comp]);
  }
  }
  
  function updateScore(result) {
  var tie = document.getElementById("tie");
  var win = document.getElementById("win");
  var lose = document.getElementById("lose");
  
  if (result === "tie") {
      ties++;
      tie.innerHTML = ties;
  }
  
  if (result === "win") {
      wins++;
      win.innerHTML = wins;
  }
  
  if (result === "lose") {
      losses++;
      lose.innerHTML = losses;
  }
  }
  
  function hand(player) {
  var comp = randInt();
  
  if (player === comp) {
      updateScore("tie");
      msgAlert("tie", player, comp);
  }
  
  /* Rock Conditions */
  if (player === 0 &amp;&amp; comp === 1) {
      updateScore("lose");
      msgAlert("lose", player, comp);
  }
  
  if (player === 0 &amp;&amp; comp === 2) {
      updateScore("win");
      msgAlert("win", player, comp);
  }
  
  /* Paper Conditions */
  if (player === 1 &amp;&amp; comp === 0) {
      updateScore("win");
      msgAlert("win", player, comp);
  }
  
  if (player === 1 &amp;&amp; comp === 2) {
      updateScore("lose");
      msgAlert("lose", player, comp);
  }
  
  /* Scissors Conditions */
  if (player === 2 &amp;&amp; comp === 0) {
      updateScore("lose");
      msgAlert("lose", player, comp);
  }
  
  if (player === 2 &amp;&amp; comp === 1) {
      updateScore("win");
      msgAlert("win", player, comp);
  }
  }
  </code></pre>
  
  <p>This is my Fiddle.
  <a href="http://jsfiddle.net/Matt1990/o6ac51v0/1/" rel="nofollow">http://jsfiddle.net/Matt1990/o6ac51v0/1/</a></p>