Why does my javascript code not register the button clicks? [duplicate]
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I am trying to program a Rock Paper Scissors Game but I have some trouble with the JavaScript.
I tested if the code is linked correctly to the html file but alert(“test”); executes just fine.
Therefore I think that the problem must be with the code itself…
I’m new to JavaScript so I am not quite sure what I need to change.
I believe that the order of the code is fine and I don’t really know what the issue with the click event listeners might be.
For reference, here are my html and css files.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Rock Paper Scissor</title>
<link rel=”stylesheet” href=”./css/style.css”>
<script type=”text/javascript” src=”./javaScript/doThings.js”></script>
</head>
<body>
<div class=”container”>
<header>
</header>
<main>
<div class=”gameButtons”>
<button class=”rock”></button>
<button class=”scissor”></button>
<button class=”paper”></button>
</div>
<div class=”info”>
<div class=”PlayerCounter”>Player: 0</div>
<div class=”ComputerCounter”>Computer: 0</div>
<p class=”WinLossTie”>Win?</p>
</div>
<div class=”reset”><button class=”btnreset”><p id=”text”>Reset?</p></button></div>
</main>
</div>
</body>
</html>
And the css file:
header{
background: url(../images/rock-paper-scissors-cartoon-banner-with-human-hands-playing-game-showing-fingers-gestures-friends-challenge-competition-decision-strategy-win-people-playing-fun-vector-illustration_107791-8480.webp) no-repeat center center;
min-height:300px;
max-height: 500px;
}
main{
display:flex;
flex-direction:column;
margin-top:50px;
}
.gameButtons{
display:flex;
justify-content: center;
gap:25px;
}
.reset{
margin-top:20px;
display:flex;
justify-content: center;
}
.info{
margin-top: 20px;
display:flex;
justify-content: center;
align-items: center;
gap: 80px;
}
button{
border-radius: 25px;
width:200px;
height:200px;
border-color:grey;
}
.reset .btnreset{
width:100px;
height:100px;
}
.rock{
background: url(../images/pexels-luis-quintero-2258250.jpg);
background-size: 200px 200px;
}
.scissor{
background: url(../images/pexels-nikolaos-dimou-1319460.jpg);
background-size: 200px 200px;
}
.paper{
background: url(../images/pexels-lisa-2304253.jpg);
background-size: 200px 200px;
}
.container{
display:flex;
flex-direction: column;
}
And lastly the JavaScript file:
let player_counter = 0;
let computer_counter = 0;
let player_input = 0;
const btnRock = document.querySelector(‘rock’);
const btnScissor = document.querySelector(‘scissor’);
const btnPaper = document.querySelector(‘paper’);
const btnReset = document.querySelector(‘btnreset’);
let WinLossTie = document.querySelector(‘WinLossTie’);
//register button click and:
function player_choose_value(){
//check which button has been clicked -> rock 1, scissor 2 or paper 3
btnRock.addEventListener(“click”, () =>{
this.player_input = 1;
});
this.btnScissor.addEventListener(“click”, () =>{
this.player_input = 2;
});
this.btnPaper.addEventListener(“click”, () =>{
this.player_input = 3;
});
}
//generate random value between 1 and 3 and return it
function computer_choose_value(){
return Math.floor(Math.random()* (3 – 1 +1) + 1);//1 -> rock, 2 -> scissor, 3 -> paper
}
//register button click and:
function reset(){
this.btnReset.addEventListener(“click”, () =>{
this.computer_counter = 0;
this.player_counter = 0;
this.player_input = 0;
});
}
//check if tie or some kind of win, update counters and output field accordingly
function won_tie_lost(){
//if tie -> “It’s a tie!”
if((player_input == 1 && computer_choose_value == 1) || (player_input == 2 && computer_choose_value == 2) || (player_input == 3 && computer_choose_value == 3))
{
this.WinLossTie.textContent=”It’s a tie!”;
}
//rock scissor, computer win
if(player_input == 2 && computer_choose_value == 1)
{
this.WinLossTie.textContent=”Rock beats scissor, win for computer”;
this.computer_counter++;
document.getElementByClassName(“ComputerCounter”).textContent=”Computer: ${computer_counter}”;
}
//rock scissor, player win
if(player_input == 1 && computer_choose_value == 2)
{
this.WinLossTie.textContent=”Rock beats scissor, win for player”;
this.player_counter++;
document.getElementByClassName(“PlayerCounter”).textContent=”Player: ${player}”;
}
//rock paper, comupter win
if(player_input==1 && computer_choose_value==3)
{
this.WinLossTie.textContent=”Paper beats rock, win for computer”
this.computer_counter++;
document.getElementByClassName(“ComputerCounter”).textContent=”Computer: ${computer_counter}”;
}
//rock paper, player win
if(player_input==3 && computer_choose_value==1)
{
this.WinLossTie.textContent=”Paper beats rock, win for player”;
this.player_counter++;
document.getElementByClassName(“PlayerCounter”).textContent=”Player: ${player}”;
}
//paper scissor, computer win
if(player_input==2 && computer_choose_value==3)
{
this.WinLossTietextContent=”Scissor beats paper, win for computer”
this.computer_counter++;
document.getElementByClassName(“ComputerCounter”).textContent=”Computer: ${computer_counter}”;
}
//paper scissor, player win
{
this.WinLossTie.textContent=”Scissor beats paper, win for player”;
this.player_counter++;
document.getElementByClassName(“PlayerCounter”).textContent=”Player: ${player}”;
}
}
//put together functions to play a round:
function play_round(){
player_choose_value();
won_tie_lost();
}
function won_five_rounds(){
if(player_counter == 5)
{
this.WinLossTie.textContent=”Mankind dominates!”;
}
else if(computer_counter == 5)
{
this.WinLossTie.textContent=”Mankind sucks!”;
}
}
function game(){//put together game logic:
while(player_counter!=5 && computer_counter!=5)//while neither has 5 wins:
{
play_round();
won_five_rounds();
}
}
If there are any resources you think I should read to be able to solve this on my own, please recommend them! I would love to learn.
أضف إجابة