单击图像不显示 textContent

Question

I am creating a Rock, Paper, and Scissors game. Most of the time, when I click the rock image, the text content ( computerPicked.textContent ) will be displayed below the image; however, sometimes when I refresh the page and click the rock image, the text content would not appear. There were times when I had to click the rock image 3-5 times until the text content appeared below it.

 function computerPlay() { let values = ['Rock', 'Paper', 'Scissors'], valueToUse = values[Math.floor(Math.random() * values.length)]; return valueToUse; }; const rock = document.getElementById('rock'); let playerPicked = document.getElementsByClassName('playerPicked')[0]; let computerPicked = document.getElementsByClassName('computerPicked')[0]; let result = document.getElementsByClassName('result')[0]; rock.addEventListener('click', function() { if (computerPlay() === 'Rock') { computerPicked.textContent = "Computer Pick: Rock"; } else if (computerPlay() === 'Paper') { computerPicked.textContent = "Computer Pick: Paper"; } else if (computerPlay() === 'Scissors') { computerPicked.textContent = "Computer Pick: Scissors"; } });

 <div class="wrapper"> <h1>Rock, Paper, Scissors!</h1> <h2 id="choose">Choose:</h2> </div> <div class="container"> <button> <img id="rock" src="https://static.thenounproject.com/png/477914-200.png"> </button> <button> <img src="https://static.thenounproject.com/png/477922-200.png"> </button> <button> <img src="https://static.thenounproject.com/png/477919-200.png"> </button> </div> <div class="wrapper"> <p class='playerPicked'></p> <p class='computerPicked'></p> <p class='result'></p> </div>

Answer 1

As mentioned in the comments, you should call computerPlay() only once per click and then save the returned value to a variable. If you don't, computerPlay() will return a completely new, random value each time it is called (the value will keep changing making it really hard to compare against). eg

const compMove = computerPlay();

Note that here we are assigning the returned value of calling the function to the variable compMove , and not a reference to the function itself.

---

The other helpful point of feedback in the comments is that you can use document.querySelector(.myClass) instead of document.getElementsByClassName('myClass')[0] to help shorten your code.

---

Also, instead of attaching click handlers one by one, you can use document.querySelectorAll to attach a handler to all the buttons at once with forEach . While iterating through the collection of buttons, you can extract data about the move from a data attribute. eg

• <button data-move="rock">
• const playerMove = e.currentTarget.dataset.move

 function computerPlay() { let values = ['Rock', 'Paper', 'Scissors'], valueToUse = values[Math.floor(Math.random() * values.length)]; return valueToUse; }; const moves = document.querySelectorAll('button'); let playerPicked = document.querySelector('.playerPicked'); let computerPicked = document.querySelector('.computerPicked'); let result = document.querySelector('.result'); moves.forEach(move => move.addEventListener('click', function(e) { const compMove = computerPlay(); const playerMove = e.currentTarget.dataset.move computerPicked.textContent = `Computer Picked: ${compMove}`; playerPicked.textContent = `You Picked: ${playerMove}`; }));

 <div class="wrapper"> <h1>Rock, Paper, Scissors!</h1> <h2 id="choose">Choose:</h2> </div> <div class="container"> <button data-move="Rock"> <img src="https://static.thenounproject.com/png/477914-200.png"> </button> <button data-move="Paper"> <img src="https://static.thenounproject.com/png/477922-200.png"> </button> <button data-move="Scissors"> <img src="https://static.thenounproject.com/png/477919-200.png"> </button> </div> <div class="wrapper"> <p class='playerPicked'></p> <p class='computerPicked'></p> <p class='result'></p> </div>

Answer 2

I think your idea was this ...

You put to draw and display the draw and not the choice of the person.

I fixed the possibility of the computer choosing the same as the player.

html

 function listen(obj) { obj.addEventListener('click', function() { let computerPicked = document.querySelector("h3"); let playerPicked = document.querySelector(".player"); playerPicked.textContent = `Player Pick: ${obj.id}`; computerPicked.textContent = `Computer Pick: ${computerPlay(obj.id)}`; }); } function computerPlay(except) { let values; switch (except) { case 'Rock': values = ['Paper', 'Scissors']; break; case 'Paper': values = ['Rock', 'Scissors'] break; case 'Scissors': values = ['Rock', 'Paper'] break; } valueToUse = values[Math.floor(Math.random() * values.length)]; return valueToUse; }; const rock = document.querySelector('#rock'); const Paper = document.querySelector('#Paper'); const Scissors = document.querySelector('#Scissors'); let playerPicked = document.getElementsByClassName('playerPicked')[0]; let computerPicked = document.getElementsByClassName('computerPicked')[0]; let result = document.getElementsByClassName('result')[0]; listen(Rock); listen(Paper); listen(Scissors);

 <div class="wrapper"> <h1>Rock, Paper, Scissors!</h1> <h2 id="choose">Choose:</h2> <h3 class="computer"> </h3> <h3 class="player"> </h3> <h3 class="whoWins"> </h3> </div> <div class="container"> <button> <img id="Rock" src="https://static.thenounproject.com/png/477914-200.png"> </button> <button> <img id="Paper" src="https://static.thenounproject.com/png/477922-200.png"> </button> <button> <img id='Scissors' src="https://static.thenounproject.com/png/477919-200.png"> </button> </div>