问题:
I'm writing a program to play rock, paper, scissors. As I was coding, everything was going fine until I added the:
userScore_span.InnerHTML = userScore;
line. When tes...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I'm writing a program to play rock, paper, scissors. As I was coding, everything was going fine until I added the:
userScore_span.InnerHTML = userScore;
line. When testing out the win function, I added a console.log('you win'); and it worked fine, but as soon as I added the line from above I got an error when I pressed any one of the three buttons.
I'm trying to relay the result from userScore to userScore_span given that userScore increases after a game is won
userScore++;
userScore_span.innerHTML = userScore;
However, when I press any of the buttons I get an error of:
Uncaught TypeError: Cannot set property 'innerHTML' of null
at lose (app.js:34)
at game (app.js:58)
I am not sure what the chrome Dev tools means by this. How can this be fixed?
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_p = 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 convertToWord(letter) {
if (letter === "r") return "Rock";
if (letter === "p") return "Paper";
return "Scissors";
}
function win(userChoice, computerChoice) {
userScore++;
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} beats ${convertToWord(computerChoice)}${smallCompWord}. You win!`;
}
function lose(userChoice, computerChoice) {
computerScore++;
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} loses to ${convertToWord(computerChoice)}${smallCompWord}. You lost!`;
}
function draw(userChoice, computerChoice) {
const smallUserWord = "user".fontsize(3).sub();
const smallCompWord = "comp".fontsize(3).sub();
result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} equals ${convertToWord(computerChoice)}${smallCompWord}. It's a draw`;
}
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();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #24272E;
font-family: avenir;
}
header {
background: white;
padding: 20px;
}
/*header each one*/
header>h1 {
color: #24272E;
text-align: center;
}
.score-board {
border: 3px solid white;
border-radius: 4px;
width: 200px;
margin: 20px auto;
/*20px (top/bottom) & center (left/right) */
color: white;
padding: 15px 20px;
text-align: center;
font-size: 46px;
position: relative;
}
.badge {
background: #E2584D;
font-size: 14px;
padding: 2px 10px;
}
#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;
}
.choices {
text-align: center;
margin-top: 50px;
}
.choice {
display: inline-block;
border: 4px solid white;
border-radius: 50%;
padding: 10px;
margin: 0 20px;
transition: all 0.3s ease;
}
.choice:hover {
cursor: pointer;
background: darkblue;
}
img {
height: 100px;
width: 100px;
}
#action-message {
text-align: center;
color: white;
font-weight: bold;
font-size: 20px;
margin-top: 20px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rock Paper Scissors</title>
<meta name="description" content="DESCRIPTION">
<link rel="stylesheet" href="styles.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 idea="user-score">0</span>:<span idea="computer-score">0</span>
</div>
<div class="result">
<p>Paper cover rock. You win!</p>
</div>
<div class="choices">
<div class="choice" id="r">
<img src="images/rock.png" alt="rock">
</div>
<div class="choice" id="p">
<img src="images/paper.png" alt="paper">
</div>
<div class="choice" id="s">
<img src="images/scissors.png" alt="scissors">
</div>
</div>
<p id="action-message">Make your move</p>
</body>
<script src="app.js"></script>
</html>
回答1:
Typo: idea
<> id
Change this:
<span idea="user-score">0</span>:<span idea="computer-score">0</span>
to
<span id="user-score">0</span>:<span id="computer-score">0</span>
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_p = 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 convertToWord(letter) {
if (letter === "r") return "Rock";
if (letter === "p") return "Paper";
return "Scissors";
}
function win(userChoice, computerChoice) {
userScore++;
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} beats ${convertToWord(computerChoice)}${smallCompWord}. You win!`;
}
function lose(userChoice, computerChoice) {
computerScore++;
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} loses to ${convertToWord(computerChoice)}${smallCompWord}. You lost!`;
}
function draw(userChoice, computerChoice) {
const smallUserWord = "user".fontsize(3).sub();
const smallCompWord = "comp".fontsize(3).sub();
result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} equals ${convertToWord(computerChoice)}${smallCompWord}. It's a draw`;
}
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();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #24272E;
font-family: avenir;
}
header {
background: white;
padding: 20px;
}
/*header each one*/
header>h1 {
color: #24272E;
text-align: center;
}
.score-board {
border: 3px solid white;
border-radius: 4px;
width: 200px;
margin: 20px auto;
/*20px (top/bottom) & center (left/right) */
color: white;
padding: 15px 20px;
text-align: center;
font-size: 46px;
position: relative;
}
.badge {
background: #E2584D;
font-size: 14px;
padding: 2px 10px;
}
#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;
}
.choices {
text-align: center;
margin-top: 50px;
}
.choice {
display: inline-block;
border: 4px solid white;
border-radius: 50%;
padding: 10px;
margin: 0 20px;
transition: all 0.3s ease;
}
.choice:hover {
cursor: pointer;
background: darkblue;
}
img {
height: 100px;
width: 100px;
}
#action-message {
text-align: center;
color: white;
font-weight: bold;
font-size: 20px;
margin-top: 20px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rock Paper Scissors</title>
<meta name="description" content="DESCRIPTION">
<link rel="stylesheet" href="styles.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 cover rock. You win!</p>
</div>
<div class="choices">
<div class="choice" id="r">
<img src="images/rock.png" alt="rock">
</div>
<div class="choice" id="p">
<img src="images/paper.png" alt="paper">
</div>
<div class="choice" id="s">
<img src="images/scissors.png" alt="scissors">
</div>
</div>
<p id="action-message">Make your move</p>
</body>
<script src="app.js"></script>
</html>
回答2:
Beside your typo idea=
/ id=
...
you could drastically minify your game logic and code by using indexes integers.
Game of integers
- Use
data-*
attribute for user buttons. The attributes should hold numerical values 0, 1, 2
. On click, the value will represents the player choice.
- The AI should play numbers too:
const AI = ~~(Math.random() * 3) // 0, 1, 2
Now that you know AI and Player both use integers (instead of strange letters combinations), you can store the Move names into an array const moves = ["Rock", "Paper", "Scissors"];
(where 0
is Rock... etc)
Rock Paper Scissors Logic
The game has three possible round resolutions, PL wins, AI wins, Draw. Let's convert those "human" values to integers, in the same order:
0
= PL win
1
= AI win
2
= Draw
Here's how to calculate those:
Draw
To calculate a Draw is the simplest. It's when both AI
and PL
integers are equal. Let's return 2
result = PL === AI ? 2
Player wins
To calculate Player win, simply increment AI choice by 1 and do a modulo 3. If the result of this operation is equal to player's choice, than Player must have won! Let's return 0
AI wins
Else, since our game has only 3 possible states, it's not a draw, and it's not a player win, than must be AI win! And let's return 1
const result = PL===AI ? 2 : (AI+1)%3 === PL? 0 : 1; // Possible results: 0, 1, 2
The cool thing in having a game result index based too is that now you can use also an array of messages like messages = ["You won!", "AI won", "it's a draw!", ]
and get the desired message by the result index!. And bonus! You can also increment the score
array values, 0
being the player's index and 1
being AIs!
const moves = ["Rock", "Paper", "Scissors"],
messages = ["You won!", "AI won", "It's a draw!"], // [PL, AI, draw]
score = [0, 0, 0], // [PL, AI, draw]
EL = sel => document.querySelector(sel),
EL_result = EL("#result"),
EL_PLScore = EL("#PLScore"),
EL_AIScore = EL("#AIScore");
function game() {
const PL = +this.dataset.playermove; // Get dataset value as integer
const AI = ~~(Math.random() * 3); // All you need: 0, 1, 2
const result = PL === AI ? 2 : (AI + 1) % 3 === PL ? 0 : 1; // 0=PLwins 1=AIwins 2=draw
score[result]++; // Increment PL or AI's score (Increments number of draws too ;) )
EL_result.innerHTML = `You: ${moves[PL]}<br>AI: ${moves[AI]}<br>${messages[result]}`;
EL_PLScore.textContent = score[0];
EL_AIScore.textContent = score[1];
}
// EVENTS:
[...document.querySelectorAll("[data-playermove]")]
.forEach(el => el.addEventListener("click", game));
*{margin:0;padding:0;box-sizing:border-box;}body{background-color:#24272E;font-family:avenir;}header {background:white;padding:20px;}header>h1{color:#24272E;text-align:center;}.score-board{border:3px solid white;border-radius:4px;width:200px;margin:20px auto;color:white;padding:15px 20px;text-align:center;font-size:46px;position:relative;}.badge{background:#E2584D;font-size:14px;padding:2px 10px;}#user-label{position:absolute;top:30px;left:-25px;}#computer-label{position:absolute;top:30px;right:-30px;}#result{font-size:1.4em;color:white;text-align:center;font-weight: bold;}.choices{text-align:center;margin-top:50px;}[data-playermove]{display:inline-block;border:4px solid white;border-radius:50%;padding:10px;margin:0 20px;transition:all 0.3s ease;}[data-playermove]:hover{cursor:pointer;background:darkblue;}img{height:100px;width:100px;}
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="PLScore">0</span>:<span id="AIScore">0</span>
</div>
<div id="result"></div>
<div class="choices">
<div data-playermove="0">ROCK</div>
<div data-playermove="1">PAPER</div>
<div data-playermove="2">SCISSORS</div>
</div>