I'm trying to build a Rock Paper Scissors game in JavaScript, but also have it where the computer outputs images to the HTML document. I've tried everything I know, and it won't work. Here's the HTML: And here's the JavaScript: The "rock.png", "paper.png", and "scissors.png" are based on their respective items, and "blank.png" is just a transparent image. This program

How do I make images change with a rock, paper, scissors game?

I’m trying to build a Rock Paper Scissors game in JavaScript, but also have it where the computer outputs images to the HTML document. I’ve tried everything I know, and it won’t work. Here’s the HTML:

<!DOCTYPE html>
  <html>
    <head>
      <script src="Rock Paper Scissors.js"></script>
    </head>
    <body>
      <p>Your choice:<img id="myImage" onafterprint="userImgDisplay()" src="blank.png" width="250px" height="250px"/>The computer's choice:<img id="myImage" onload="comImgDisplay()" src="blank.png" width="250px" height="250px"/>
      </p>`

JavaScript
​x
 
<!DOCTYPE html>
  <html>
    <head>
      <script src="Rock Paper Scissors.js"></script>
    </head>
    <body>
      <p>Your choice:<img id="myImage" onafterprint="userImgDisplay()" src="blank.png" width="250px" height="250px"/>The computer's choice:<img id="myImage" onload="comImgDisplay()" src="blank.png" width="250px" height="250px"/>
      </p>`
​

And here’s the JavaScript:

var userChoice = prompt("Do you choose rock, paper or scissors?","Don't use articles (i.e. the, a, etc.)").toLowerCase();

var computerChoice = Math.random();

if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}

function userImgDisplay() {
  var image = document.getElementById('myImage');
  if (userChoice = "rock") {
    image.src = "rock.png";
  }else if (userChoice = "paper") {
    image.src = "paper.png";
  }else if (userChoice = "scissors") {
    image.src = "scissors.png";
  }
}

function comImgDisplay() {
  var image = document.getElementById('myImage');
  if (computerChoice = "rock") {
    image.src = "rock.png";
  }else if (computerChoice = "paper") {
    image.src = "paper.png";
  }else if (computerChoice = "scissors") {
    image.src = "scissors.png";
  }
}

JavaScript
 
var userChoice = prompt("Do you choose rock, paper or scissors?","Don't use articles (i.e. the, a, etc.)").toLowerCase();
​
var computerChoice = Math.random();
​
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}
​
function userImgDisplay() {
  var image = document.getElementById('myImage');
  if (userChoice = "rock") {
    image.src = "rock.png";
  }else if (userChoice = "paper") {
    image.src = "paper.png";
  }else if (userChoice = "scissors") {
    image.src = "scissors.png";
  }
}
​
function comImgDisplay() {
  var image = document.getElementById('myImage');
  if (computerChoice = "rock") {
    image.src = "rock.png";
  }else if (computerChoice = "paper") {
    image.src = "paper.png";
  }else if (computerChoice = "scissors") {
    image.src = "scissors.png";
  }
}
​

The “rock.png”, “paper.png”, and “scissors.png” are based on their respective items, and “blank.png” is just a transparent image. This program will always display “rock.png” for my choice and nothing for the computer’s. What am I doing wrong?

Answer

Your logic is not right, you are using = where it should be ==

For example look at my changes to this method, you have issues like this in all your methods.

function comImgDisplay() {
  var image = document.getElementById('myImage');
 if (computerChoice == "rock") {
   image.src = "rock.png";
 }else if (computerChoice == "paper") {
  image.src = "paper.png";
 }else if (computerChoice =="scissors") {
  image.src = "scissors.png";
 }
}

JavaScript
 
function comImgDisplay() {
  var image = document.getElementById('myImage');
 if (computerChoice == "rock") {
   image.src = "rock.png";
 }else if (computerChoice == "paper") {
  image.src = "paper.png";
 }else if (computerChoice =="scissors") {
  image.src = "scissors.png";
 }
}
​

For simplicity you could just do this:

function comImgDisplay() {
  var image = document.getElementById('myImage');
   image.src = computerChoice  + ".png";
}

JavaScript
 
function comImgDisplay() {
  var image = document.getElementById('myImage');
   image.src = computerChoice  + ".png";
}
​

Advertisement

Answer