I have been making a rock-paper-scissors game using vanilla JS everything else is working fine, when I click other options the game result is changing but when I click on the scissors option/icon it’s not working the game result is not changing the innerHTML
is not changing only when I click on scissors although the choice scissor followed by the computer’s random choice is visible on the console when I click on it.
This is my first project with JS and I am really confused
// ---computer's choice---
const genCompChoice = () => {
let options = ["rock", "paper", "scissors"]
let idx = Math.floor(Math.random() * 3)
return options[idx]
}
let textBubble = document.querySelector("#message")
let userScore = document.querySelector(".user-score")
let incrementUser = 0
let compScore = document.querySelector(".computer-score")
let incrementComp = 0
// ---game logic---
const playGame = (usersChoice) => {
console.log("users choice = ", usersChoice)
const computersChoice = genCompChoice()
console.log("computer's choice = ", computersChoice)
let textBubble = document.querySelector("#message")
function changingText() {
if (usersChoice === computersChoice) {
let change = textBubble.innerHTML = "It's a Tie!"
textBubble.style.backgroundColor = "black"
} else if (usersChoice == "rock") {
if (computersChoice == "scissors") {
textBubble.innerHTML = "You Won!"
userScore.innerHTML = ++incrementUser
textBubble.style.backgroundColor = "#3976d6"
} else {
textBubble.innerHTML = "Computer Won!"
textBubble.style.backgroundColor = "#d00d14"
compScore.innerHTML = ++incrementComp
}
} else if (usersChoice == "paper") {
if (computersChoice == "rock") {
textBubble.innerHTML = "You Won!"
textBubble.style.backgroundColor = "#3976d6"
userScore.innerHTML = ++incrementUser
} else {
textBubble.innerHTML = "Computer Won!"
textBubble.style.backgroundColor = "#d00d14"
compScore.innerHTML = ++incrementComp
}
} else if (usersChoice == "scissors") {
if (computersChoice == "paper") {
textBubble.innerHTML = "You Won!"
textBubble.style.backgroundColor = "#3976d6"
userScore.innerHTML = ++incrementUser
} else {
textBubble.innerHTML = "Computer Won!"
textBubble.style.backgroundColor = "#d00d14"
compScore.innerHTML = ++incrementComp
}
}
}
changingText()
}
// ---clickable, user's choice---
let choices = document.querySelectorAll(".options-images")
choices.forEach(
(choice => {
choice.addEventListener("click", () => {
const usersChoice = choice.getAttribute("id")
playGame(usersChoice)
})
})
)
<h1>Rock Paper Scissor</h1>
<div class="options">
<div class="options-images" id="rock">
<img src="images/rock.png" alt="rock">
</div>
<div class="options-images" id="paper">
<img src="images/paper.png" alt="paper">
</div>
<div class="options-images" id="Scissors">
<img src="images/scissors.png" alt="scissors">
</div>
</div>
<div class="score-board">
<div class="Score">
<p class="user-score">0</p>
<p>You</p>
</div>
<div class="Score">
<p class="computer-score">0</p>
<p>Computer</p>
</div>
</div>
<div class="msg-box">
<div class="msg">
<p id="message">YOU WON!</p>
</div>
</div>