Próbuję zbudować grę w nożyce do papieru skalnego. Kiedy wpisałem ten kod:

userScore_span.innerHTML = userScore;

Następnie pokazuje Uncaught TypeError: Nie można ustawić właściwości „innerHTML” na wartość null, to jest mój kod.

<!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:

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:

@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;
}

To jest cały mój kod, czy możesz mi powiedzieć, dlaczego wynik się nie zwiększa i mówi: Uncaught TypeError: Cannot set property „innerHTML” of null

0
manoIk 20 listopad 2019, 22:51
"user-score" nie równa się "user-Score"w identyfikatorach rozróżniana jest wielkość liter
 – 
Patrick Evans
20 listopad 2019, 22:54
Masz problem z wielkimi literami w document.getElementById('user-Score');, pole jest zdefiniowane za pomocą id='user-score'
 – 
ControlAltDel
20 listopad 2019, 22:55

1 odpowiedź

Masz typo w swoim kodzie.

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

Identyfikator powinien pasować do tego w HTML, ponieważ rozróżniana jest wielkość liter. Więc albo zaktualizuj swój kod w następujący sposób:

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

Lub zaktualizuj swój szablon HTML w następujący sposób:

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

To samo dotyczy również rozpiętości wyniku komputerowego.

0
Vitalii Chmovzh 20 listopad 2019, 22:55
Pytania o literówki powinny być zamknięte, istnieje konkretny powód do ścisłego głosowania
 – 
Patrick Evans
20 listopad 2019, 22:56