尝试在 JS 石头、纸、剪刀游戏中使用 inner.html

Question

I am trying to build a rock paper scissors game.我正在尝试构建一个石头剪刀布游戏。 When I entered this code:当我输入这段代码时：

userScore_span.innerHTML = userScore;

Then it shows Uncaught TypeError: Cannot set property 'innerHTML' of null this is my code.然后它显示 Uncaught TypeError: Cannot set property 'innerHTML' of null 这是我的代码。

<!DOCTYPE HTML>
<html>
 <head>
    <meta charset="utf-8">
    <title>Rock paper scissors game </title>
  <link rel="stylesheet" href="rps.css">
</head>
<body>
    <header>
        <h1> Rock paper scissors </h1>
    </header>

        <div class="Score-board">
        <div id="user-label" class="badge">user</div>
        <div id="computer-label" class="badge">comp</div>
        <span id="user-score">0</span>:<span id="computer-score">0</span>
        </div>

        <div class="result">
            <p>Paper covers rock. you win!</p>
        </div>

        <div class="choices">
            <div class="choice" id="r">
             <img src="c:\Users\Emmanuel\Desktop\r.png" alt="">
            </div>
            <div class="choice" id="p">
             <img src="c:\Users\Emmanuel\Desktop\p.png"  alt="">
            </div>
            <div class="choice" id="s">
             <img src="c:\Users\Emmanuel\Desktop\s.png" alt="">
            </div>
         </div>

        <p id="action-message">Make your move.</P>
    <script src="rps.js" charset="utf-8" ></script>
  </body>
</html>

JavaScript: JavaScript：

let userScore = 0;
let computerScore = 0;
const userScore_span = document.getElementById("user-Score");
const computerScore_span = document.getElementById("computer-Score");
const scoreBoard_div = document.querySelector(".Score-board");
const result_div = document.querySelector(".result > p");
const rock_div = document.getElementById("r");
const paper_div = document.getElementById("p");
const scissors_div = document.getElementById("s");

function getComputerChoice() {
  const choices = ['r', 'p', 's'];
  const randomNumber = Math.floor(Math.random() * 3);
  return choices[randomNumber];
}

function win(user, computer) {
  userScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  console.log(user);
  console.log(computer);
}

function lose() {}

function draw() {
 console.log("drawww");
}

function game(userChoice) {
  const computerChoice = getComputerChoice();
  switch (userChoice + computerChoice) {
    case "rs":
    case "pr":
    case "sp":
    win(userChoice, computerChoice);
      break;
    case "rp":
    case "ps":
    case "sr":
    lose(userChoice, computerChoice);
    break;
    case "rr":
    case "pp":
    case "ss":
    draw(userChoice, computerChoice);
      break;
  }
}

function main() {
  rock_div.addEventListener('click',function () {
    game("r");
  })

  paper_div.addEventListener('click',function () {
    game("p");
  })

  scissors_div.addEventListener('click',function () {
    game("s")
  })
}
 main();

CSS: CSS：

@import url('https://fonts.googleapis.com/css?family=Asap:400,500,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}

body{
  background-color: #190069;
}

header {
  background: white;
  padding: 20px;
}

header >h1 {
  color: #24272E;
  text-align: center;
  font-family: Asap, sans-serif;
}

.Score-board {
  margin: 20px auto;
  border: 3px solid white;
  border-radius: 4px;
  text-align: center;
  width: 200px;
  color: red;
  font-size: 46px;
  padding: 15px 20px;
  font-family: Asap, sans-serif;
  position: relative;
}

.badge {
  background: red;
  color: black;
  font-size: 14px;
  padding: 2px 10px;
  font-family: Asap, sans-serif;
}

#user-label {
  position: absolute;
  top: 30px;
  left: -25px;
}

#computer-label {
  position: absolute;
  top: 30px;
  right: -30px;
}

.result {
  font-size: 40px;
  color: white;
}

.result >p {
  text-align: center;
  font-weight: bold;
  font-family: Asap, sans-serif;
}

.choices {
  margin-top: 50px;
  text-align: center;
}

.choice {
  border: 4px solid white:
  border-radius: 50%;
  margin: 0 20px;
  padding: 10px;
  display: inline-block;
  transition: all 0.3s ease;
}

.choice:hover {
cursor: pointer;
background: #FFFFFF;
}

#action-message {
  text-align: center;
  color: white;
  font-family: Asap, sans-serif;
  font-weight: bold;
  font-size: 20px;
  margin-top: 20px;
}

This is all my code can you please tell me why the score isn't increasing and saying: Uncaught TypeError: Cannot set property 'innerHTML' of null这是我所有的代码，你能告诉我为什么分数没有增加并说： Uncaught TypeError: Cannot set property 'innerHTML' of null

Answer 1

You have a typo in your code.您的代码中有错字。

const userScore_span = document.getElementById("user-Score");

ID should match to the one in HTML, since it is case-sensitive. ID 应与 HTML 中的 ID 匹配，因为它区分大小写。 So either update your code as follows:因此，请按如下方式更新您的代码：

const userScore_span = document.getElementById("user-score");

or update your HTML template as follows:或更新您的 HTML 模板，如下所示：

<span id="user-Score">0</span>

The same will apply to computer-score span as well.这同样适用于计算机分数跨度。

尝试在 JS 石头、纸、剪刀游戏中使用 inner.html

问题描述

1 个解决方案

解决方案1
0 2019-11-20 19:55:09

尝试在 JS 石头、纸、剪刀游戏中使用 inner.html

问题描述

1 个解决方案

解决方案1 0 2019-11-20 19:55:09

解决方案1
0 2019-11-20 19:55:09