时间戳

首页 > 解决方案 > 单击图像不显示 textContent

javascript - 单击图像不显示 textContent

问题描述

我正在创建一个石头、纸和剪刀游戏。大多数时候，当我点击岩石图片时，computerPicked.textContent图片下方会显示文字内容（ ）；但是，有时当我刷新页面并单击岩石图像时，文本内容不会出现。有时我不得不单击岩石图像 3-5 次，直到文本内容出现在其下方。

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>

标签： javascripthtml

解决方案

正如评论中提到的，您应该computerPlay()每次点击只调用一次，然后将返回的值保存到变量中。如果您不这样做，computerPlay()则每次调用时都会返回一个全新的随机值（该值将不断变化，因此很难与之比较）。例如

const compMove = computerPlay();

请注意，这里我们将调用函数的返回值分配给变量compMove，而不是对函数本身的引用。

评论中另一个有用的反馈点是您可以使用document.querySelector(.myClass)而不是document.getElementsByClassName('myClass')[0]来帮助缩短代码。

document.querySelectorAll此外，您可以使用. 一次将处理程序附加到所有按钮，而不是一一附加单击处理程序forEach。在遍历按钮集合时，您可以从数据属性中提取有关移动的数据。例如

  • <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>

推荐阅读