本文介绍了尝试在 JS Rock、Paper、Scissors 游戏中设置一个 span 元素等于一个变量值的处理方法，对大家解决问题具有一定的参考价值
问题描述
我正在编写一个程序来玩石头、纸和剪刀.在我编写代码时，一切都很顺利，直到我添加了:
userScore_span.InnerHTML = userScore;线.在测试 win 功能时，我添加了一个 console.log('you win');它工作正常，但是一旦我从上面添加了这一行，当我按下三个按钮中的任何一个时，就会出错.
我正在尝试将结果从 userScore 传递到 userScore_span，因为 userScore 在赢得游戏后会增加
userScore++;userScore_span.innerHTML = userScore;然而，当我按下任何按钮时，我得到一个错误:
未捕获的类型错误:无法设置 null 的属性innerHTML"输了(app.js:34)在游戏中 (app.js:58)我不确定 chrome Dev 工具是什么意思.如何解决这个问题?
让 userScore = 0;让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_p = document.querySelector(".result > p");constrock_div = document.getElementById('r');const paper_div = document.getElementById('p');const scissors_div = document.getElementById('s');函数 getComputerChoice() {const 选择 = ['r', 'p', 's'];const randomNumber = (Math.floor(Math.random() * 3));返回选择[随机数]；}函数 convertToWord(字母){如果(字母 ===r")返回摇滚"；if (let === "p") return "Paper";返回 "剪刀";}功能赢(用户选择，计算机选择){用户评分++；userScore_span.innerHTML = userScore;computerScore_span.innerHTML = computerScore;const smallUserWord = "user".fontsize(3).sub();const smallCompWord = "comp".fontsize(3).sub();result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} 胜过 ${convertToWord(computerChoice)}${smallCompWord}.你赢了！`;}功能丢失(用户选择，计算机选择){计算机分数++；userScore_span.innerHTML = userScore;computerScore_span.innerHTML = computerScore;const smallUserWord = "user".fontsize(3).sub();const smallCompWord = "comp".fontsize(3).sub();result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} 输给 ${convertToWord(computerChoice)}${smallCompWord}.你输了！`;}函数绘制(用户选择，计算机选择){const smallUserWord = "user".fontsize(3).sub();const smallCompWord = "comp".fontsize(3).sub();result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} 等于 ${convertToWord(computerChoice)}${smallCompWord}.这是平局`;}功能游戏(用户选择){const computerChoice = getComputerChoice();开关(用户选择 + 计算机选择){案例rs":案例公关":案例sp":赢(用户选择，计算机选择)；休息;案例'rp':案例ps":案例'sr':失去(用户选择，计算机选择)；休息;案例'rr':案例'pp':案例's':绘制(用户选择，计算机选择)；休息;}}函数主(){Rock_div.addEventListener('点击', function() {游戏('r');})paper_div.addEventListener('点击', function() {游戏('p');})scissors_div.addEventListener('click', function() {游戏('s');})};main();* {边距:0；填充:0；box-sizing: 边框框；}身体 {背景颜色:#24272E；字体系列:avenir；}标题{背景:白色；填充:20px；}/*每个标题*/标题> h1 {颜色:#24272E；文本对齐:居中；}.计分板{边框:3px纯白色；边框半径:4px；宽度:200px；边距:20px 自动；/*20px(顶部/底部)&中心(左/右)*/白颜色;填充:15px 20px；文本对齐:居中；字体大小:46px；位置:相对；}.徽章 {背景:#E2584D；字体大小:14px；填充:2px 10px；}#用户标签{位置:绝对；顶部:30px；左:-25px；}#计算机标签{位置:绝对；顶部:30px；右:-30px；}.结果 {字体大小:40px；白颜色;}.结果> p {文本对齐:居中；字体粗细:粗体；}.选择{文本对齐:居中；边距顶部:50px；}.选择 {显示:内联块；边框:4px纯白色；边界半径:50%；填充:10px；边距:0 20px；过渡:全0.3s缓和；}.选择:悬停{光标:指针；背景:深蓝色；}图片{高度:100px；宽度:100px；}#action-message {文本对齐:居中；白颜色;字体粗细:粗体；字体大小:20px；边距顶部:20px}<html lang="zh-cn"><头><meta charset="UTF-8"><title>石头剪刀布</title><meta name="description" content="DESCRIPTION"><link rel="stylesheet" href="styles.css"><身体><标题><h1>石头剪刀布</h1></标题><div class="score-board"><div id="user-label" class="badge">user</div><div id="computer-label" class="badge">comp</div><span idea="user-score">0</span>:<span idea="computer-score">0</span><div class="result"><p>纸盖岩.你赢了！</p>
<div class="选择"><div class="choice" id="r"><img src="images/rock.png" alt="rock">