Here is the final code at CodePen!

HTML:

<img class="icon" id="rock" src="https://png.icons8.com/rock/win8/64" title="Rock" width="50" height="50"> <img class="icon" id="paper" src="https://png.icons8.com/paper-filled/ios7/50" title="Paper Filled" width="50" height="50"> <img class="icon" id="scissors" src="https://png.icons8.com/scissors-filled/ios7/50" title="Scissors Filled" width="50" height="50"> 

This is all the JS below. I think there could be many more efficiencies to be had, but I’m struggling to find more.

JS:

// Start All the Variables // var userChoice; var watson; var saying = "You chose " + userChoice + ". Watson chose " + watson; var win = " You Win!"; var lose = " You Lose"; var tie = " We Tied";  var audioWinner = new Audio('http://facebook.design/public/sounds/Success 3.mp3'); var audioLoser = new Audio('http://facebook.design/public/sounds/Error 1.mp3'); var audioTied = new Audio('http://facebook.design/public/sounds/Collapse.mp3');  var winner = document.getElementById('winner'); var loser = document.getElementById('loser'); var tied = document.getElementById('tied'); var rock = document.getElementById("rock"); // rock button el var paper = document.getElementById("paper"); // paper button el var scissors = document.getElementById("scissors"); // scissors button el var myChoice = document.getElementById("myChoice"); // user choice el var cpuChoice = document.getElementById("cpuChoice"); // watson choice el var verdict = document.getElementById("verdict"); // verdict el  // USER'S CHOICE // ************* rock.addEventListener("click", function(){   userChoice = 0;   myChoice.innerHTML = "You chose: Rock";   checkWatson();   compare(); }); paper.addEventListener("click", function(){   userChoice = 1;   myChoice.innerHTML = "You chose: Paper";   checkWatson();   compare(); }); scissors.addEventListener("click", function(){   userChoice = 2;   myChoice.innerHTML = "You chose: Scissors";   checkWatson();   compare(); });  // WATSON'S CHOICE // *************** function checkWatson() {   // generates a random number between 0-2    randomNum = Math.floor(Math.random() * 3);    // generate a random number and assign it to one of the 3 choices   if (randomNum === 0) {      watson = "rock";   } else if (randomNum === 1) {      watson = "paper";   } else {      watson = "scissors";   }   console.log('Watson chose: ' + watson);   }  // 3 OUTCOME FUNCTIONS // ******************* function resultsTie() {   audioTied.play();   verdict.innerHTML = tie; // tie   winner.style.display = 'none';   loser.style.display = 'none';   tied.style.display = 'block'; } function resultsWinner() {   audioWinner.play();   verdict.innerHTML = win; // win   winner.style.display = 'block';   loser.style.display = 'none';   tied.style.display = 'none'; } function resultsLoser() {   audioLoser.play();   verdict.innerHTML = lose;   winner.style.display = 'none';   loser.style.display = 'block';   tied.style.display = 'none'; }  // COMPARE USER VS WATSON // ********************** function compare() {   // user chooses rock   if (userChoice ===  randomNum) {      resultsTie();   } else if (userChoice === 0 && randomNum === 1) {      resultsLoser();   } else if (userChoice === 0 && randomNum === 2) {      resultsWinner();   }    // user chooses paper     if (userChoice === 1 && randomNum === 0) {      resultsWinner();   }   else if (userChoice === 1 && randomNum === 2) {      resultsLoser();   }    // user chooses scissors   if (userChoice === 2 && randomNum === 0) {      resultsLoser();   } else if (userChoice === 2 && randomNum === 1) {      resultsWinner();   }    cpuChoice.innerHTML = "Watson chose: " + watson; } 

I made this game for my SON, and he loves it BTW 🙂