Question

如何将 span 元素的内容更改为变量的内容

2019-02-24

80

javascript html

我正在做一个石头剪刀布游戏，大部分编码都已完成，只是我没有向按钮添加功能，无论你点击什么，你都会选择布。

在添加该功能之前，我希望在网页上更新分数，但每当它尝试更新时，我都会得到：

Uncaught TypeError: Cannot set property 'textContent' of null

let choices = ["rock", "paper", "scissors"]
let localPlay = "paper"
let cpuChoice;
let scorePlayer = 0
let scoreCPU = 0
let playerPoints = document.getElementById("pScore")
let cpuPoints = document.getElementById("cScore")

function cpuPlay() {
  cpuChoice = choices[Math.floor(Math.random() * choices.length)];
  return cpuChoice
}

function gameConditions() {
  // DRAW
  if (localPlay === cpuChoice) {
    console.log("draw")

    // ROCK
  } else if (localPlay === choices[0] && cpuChoice === choices[1]) {
    scoreCPU = scoreCPU + 1
    return cpuPoints.textContent = scoreCPU;
    //cpu
  } else if (localPlay === choices[0] && cpuChoice === choices[2]) {
    scorePlayer = scorePlayer + 1
    return playerPoints.textContent = scorePlayer;
    //player

    // PAPER
  } else if (localPlay === choices[1] && cpuChoice === choices[0]) {
    scorePlayer = scorePlayer + 1
    return playerPoints.textContent = scorePlayer;
    //player
  } else if (localPlay === choices[1] && cpuChoice === choices[2]) {
    scoreCPU = scoreCPU + 1
    return cpuPoints.textContent = scoreCPU;
    //cpu

    // SCISSORS
  } else if (localPlay === choices[2] && cpuChoice === choices[0]) {
    scoreCPU = scoreCPU + 1
    return cpuPoints.textContent = scoreCPU;
    //cpu
  } else if (localPlay === choices[2] && cpuChoice === choices[1]) {
    scorePlayer = scorePlayer + 1
    return playerPoints.textContent = scorePlayer;
    //player
    // DEBUG
  } else {
    console.log("not working")
  }
}

function shoot() {
  cpuPlay();
  gameConditions();
  console.log(cpuChoice)
  imageChanger();
  console.log("Player score: " + scorePlayer)
  console.log("Cpu score: " + scoreCPU)
}

function imageChanger() {
  let cpuImage = document.getElementById("cpuImg")
  if (cpuChoice === choices[0]) {
    cpuImage.src = "https://rodpa715.github.io/rock-paper-scissors/images/rock.png"
  } else if (cpuChoice === choices[1]) {
    cpuImage.src = "https://rodpa715.github.io/rock-paper-scissors/images/paper.png"
  } else if (cpuChoice === choices[2]) {
    cpuImage.src = "https://rodpa715.github.io/rock-paper-scissors/images/scissors.png"
  }
}

* {
  background-color: #9f85db;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

.choices {
  display: inline-block;
  height: 175px;
  width: 175px;
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  text-align: center;
  cursor: pointer;
}

.choices img {
  height: 150px;
  width: 150px;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Rock Paper Scissors</title>
    <script type="text/javascript" src="./game.js"></script>
    <!--<link href="./style.css" type="text/css" rel="stylesheet">-->
  </head>

  <body>
    <h1>Rock Paper Scissors</h1>

    <div class="score">
      <h3>Player score: <span id="pScore"> 0 </span></h3>
      <h3>Cpu score: <span id="cScore"> 0 </span> </h3>
    </div>

    <div class="cpu">
      <h2>Cpu has chosen :</h2>
      <div class="choices"><img id="cpuImg" src=""></div>
    </div>

    <div class="player">
      <h2>Choose one :</h2>

      <div class="choices">
        <img src="https://rodpa715.github.io/rock-paper-scissors/images/rock.png" onclick="shoot();">
      </div>

      <div class="choices">
        <img src="https://rodpa715.github.io/rock-paper-scissors/images/paper.png" onclick="shoot();">
      </div>

      <div class="choices">
        <img src="https://rodpa715.github.io/rock-paper-scissors/images/scissors.png" onclick="shoot();">
      </div>
    </div>

  </body>

</html>

这是我的 JsFiddle 这是我的 Github Repo 这是 GitHub 页面

这是否与我尝试使用设置 .textcontent 有关变量？

Answer 1

这是 JS 和 HTML 最常见的问题。JS 将在整个 HTML 之前加载，因此当您尝试创建 DOM 变量时，什么都没有（span 尚未加载）。因此，您可以创建一个 onLoad 事件，这将触发这些变量，或者不创建这些变量，并直接将值设置为 span。

Answer 2

只需在 body 标签（而不是 head 标签）内添加 script 标签即可。

它会起作用！！！

Sagar Kulthe

2019-02-24

Answer 3

尝试一下：

else if (localPlay === choices[0] && cpuChoice === choices[1]){
    scoreCPU = scoreCPU + 1
    cpuPoints.innerText = scoreCPU;
}