我正在尝试制作剪刀石头布游戏。当我输入这段代码时:
userScore_span.innerHTML = userScore;
然后显示 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:
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;
}
这就是我的所有代码，你能告诉我为什么分数没有增加并说:Uncaught TypeError: Cannot set property 'innerHTML' of null
最佳答案
您的代码中有错别字。
const userScore_span = document.getElementById("user-Score");
ID 应与 HTML 中的 ID 匹配，因为它区分大小写。因此，要么按如下方式更新您的代码:
const userScore_span = document.getElementById("user-score");
或按如下方式更新您的 HTML 模板:
<span id="user-Score">0</span>
这同样适用于计算机分数跨度。
关于javascript - 尝试在 JS 剪刀石头布游戏中使用 inner.html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58962311/