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

时间：2019-02-24 14:36:20

标签： javascript html

我正在做一个石头剪刀布游戏，大多数编码都完成了，除了我没有向按钮添加功能之外，无论您单击什么都可以选择纸张。

在添加该功能之前，我希望在网页上更新分数，但是只要尝试更新，我都会得到：

  

未捕获的TypeError：无法将属性'textContent'设置为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 Page

这与我尝试使用变量设置.textcontent的事实有关吗？

3 个答案:

答案 0 :(得分：2)

这是JS和HTML最常见的问题。 JS将在整个HTML之前加载，因此，当您尝试创建DOM变量时，没有任何内容（跨度尚未加载）。因此，您可以创建一个onLoad事件，该事件将融合这些变量，或者不创建这些变量，并将值直接设置为spans。

答案 1 :(得分：1)

只需将=== RUN Test_dispatcher_Cancel_Error_completed INFO[0000] creating new dispatcher component=dispatcher INFO[0000] starting dispatcher component=dispatcher INFO[0000] dispatching new attack ID=d63a79ac-6f51-486e-845d-077c8c76168a Status=scheduled component=dispatcher ================== WARNING: DATA RACE Read at 0x00c0000f8d68 by goroutine 8: vegeta-server/internal/dispatcher.(*task).Complete() /Users/nitishm/vegeta-server/internal/dispatcher/task.go:116 +0x61 vegeta-server/internal/dispatcher.run() /Users/nitishm/vegeta-server/internal/dispatcher/task.go:213 +0x17a Previous write at 0x00c0000f8d68 by goroutine 7: vegeta-server/internal/dispatcher.(*task).Run() /Users/nitishm/vegeta-server/internal/dispatcher/task.go:107 +0x12a vegeta-server/internal/dispatcher.(*dispatcher).Run() /Users/nitishm/vegeta-server/internal/dispatcher/dispatcher.go:109 +0xb5f Goroutine 8 (running) created at: vegeta-server/internal/dispatcher.(*task).Run() /Users/nitishm/vegeta-server/internal/dispatcher/task.go:105 +0x11c vegeta-server/internal/dispatcher.(*dispatcher).Run() /Users/nitishm/vegeta-server/internal/dispatcher/dispatcher.go:109 +0xb5f Goroutine 7 (running) created at: vegeta-server/internal/dispatcher.Test_dispatcher_Cancel_Error_completed() /Users/nitishm/vegeta-server/internal/dispatcher/dispatcher_test.go:249 +0x545 testing.tRunner() /usr/local/go/src/testing/testing.go:827 +0x162 ================== ================== WARNING: DATA RACE Write at 0x00c0000f8d98 by goroutine 8: vegeta-server/internal/dispatcher.(*task).SendUpdate() /Users/nitishm/vegeta-server/internal/dispatcher/task.go:164 +0x70 vegeta-server/internal/dispatcher.(*task).Complete() /Users/nitishm/vegeta-server/internal/dispatcher/task.go:128 +0x20e vegeta-server/internal/dispatcher.run() /Users/nitishm/vegeta-server/internal/dispatcher/task.go:213 +0x17a Previous write at 0x00c0000f8d98 by goroutine 7: vegeta-server/internal/dispatcher.(*task).SendUpdate() /Users/nitishm/vegeta-server/internal/dispatcher/task.go:164 +0x70 vegeta-server/internal/dispatcher.(*task).Run() /Users/nitishm/vegeta-server/internal/dispatcher/task.go:109 +0x15d vegeta-server/internal/dispatcher.(*dispatcher).Run() /Users/nitishm/vegeta-server/internal/dispatcher/dispatcher.go:109 +0xb5f Goroutine 8 (running) created at: vegeta-server/internal/dispatcher.(*task).Run() /Users/nitishm/vegeta-server/internal/dispatcher/task.go:105 +0x11c vegeta-server/internal/dispatcher.(*dispatcher).Run() /Users/nitishm/vegeta-server/internal/dispatcher/dispatcher.go:109 +0xb5f Goroutine 7 (running) created at: vegeta-server/internal/dispatcher.Test_dispatcher_Cancel_Error_completed() /Users/nitishm/vegeta-server/internal/dispatcher/dispatcher_test.go:249 +0x545 testing.tRunner() /usr/local/go/src/testing/testing.go:827 +0x162 ================== INFO[0002] canceling attack ID=d63a79ac-6f51-486e-845d-077c8c76168a ToCancel=true component=dispatcher ERRO[0002] failed to cancel task ID=d63a79ac-6f51-486e-845d-077c8c76168a ToCancel=true component=dispatcher error="cannot cancel task d63a79ac-6f51-486e-845d-077c8c76168a with status completed" WARN[0002] gracefully shutting down the dispatcher component=dispatcher --- FAIL: Test_dispatcher_Cancel_Error_completed (2.01s) testing.go:771: race detected during execution of test 标签添加到body标签而不是head中即可。

它将起作用！！！

答案 2 :(得分：0)

尝试一下：

else if (localPlay === choices[0] && cpuChoice === choices[1]){
    scoreCPU = scoreCPU + 1
    cpuPoints.innerText = scoreCPU;
}
相关问题
最新问题