如何将span元素的内容更改为变量的内容
如何将span元素的内容更改为变量的内容
提问于 2019-02-24 14:36:19
我正在做一个石头剪刀游戏，大部分编码都是完成的，只是我没有给按钮添加功能，不管你点击什么，你都会选择纸。
在添加该功能之前，我希望在网页上更新得分，但每当它试图更新时，我会得到：
Uncaught :无法设置属性'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回购，这是GitHub页面
这与我试图用变量设置.textcontent这一事实有关吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-02-24 14:44:23
只需将您的script标签添加到主体标签中，而不是head。
会成功的！
Stack Overflow用户
发布于 2019-02-24 14:40:44
这是JS和HTML最常见的问题。JS将在整个HTML之前加载，所以当您试图创建一个DOM变量时，什么都没有(还没有加载跨空间)。因此，您可以创建一个onLoad事件，该事件将对这些变量进行处理，或者不创建这些变量，并直接将值设置为spans。
Stack Overflow用户
发布于 2019-02-24 14:43:32
试试这个：
else if (localPlay === choices[0] && cpuChoice === choices[1]){
scoreCPU = scoreCPU + 1
cpuPoints.innerText = scoreCPU;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54852943
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号