'javascript initializing variable first undefined after second click set value

I'm new to js, just started learning two weeks ago. Started the Tho Odin project and the rock paper scissor ui lesson is caught me. I made a variable palyerResult, and if i click on a button, the first one always undefined, the second click is good. I know this will be a really amatuer problem, but simply doesnt know how to solve it.

Here's my code:

const buttons = document.querySelectorAll(".btn");

const tools = ["rock", "paper", "scissor"];

const rock = document.querySelector("#btn-rock");
const paper = document.querySelector("#btn-paper");
const scissor = document.querySelector("#btn-scissor");

let playerResult;
let userScore = 1;
let aiScore = 1;
let draw = 1;


rock.addEventListener("click", function onclick(){
return playerResult = tools[0], console.log("Player: ", playerResult);
});
paper.addEventListener("click", function onclick(){
return playerResult = tools[1], console.log("Player: ", playerResult);
});
scissor.addEventListener("click", function onclick(){
return playerResult = tools[2], console.log("Player: ", playerResult);
});


//NPC random select
function computerPlay(){
const npcTool = tools[Math.floor(Math.random()*tools.length)];
return console.log("Ai: ", npcTool), npcTool;
};


// start the game for 1 round
function playRound(){
let aiResult = computerPlay();
const match = `${playerResult} vs ${aiResult}`;

if(playerResult === aiResult){
   return console.log(`${match} is a draw!`)
}else{
    if(playerResult === tools[0] && aiResult != tools[1]){
        return console.log(`${match}: You win, ${playerResult} beat the ${aiResult}`)
    }else if(playerResult === tools[1] && aiResult != tools[2]) {
        return console.log(`${match}: You win, ${playerResult} beat the ${aiResult}`)
    }else if(playerResult === tools[2] && aiResult != tools[0]){
        return console.log(`${match}: You win, ${playerResult} beat the ${aiResult}`)
    }else{
        return console.log(`${match}: Ai win, ${aiResult} beat the ${playerResult}`)
    }
}


};

edit: forgot the HTML.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- 
scale=1.0">
<script src="./index.js" defer></script>
<title>Rock, Paper, Scissor! TOP</title>
</head>
<body>
<div>
    <h1>Rock, Paper and Scissors!</h1>
</div>
<div>
    <div id="userScore">0</div> <br>
    <div id="draw">0</div> <br>
    <div id="aiScore">0</div> <br>
</div>
<div id="buttons">
    <button class="btn" id="btn-rock" type="submit" 
onclick="playRound()">Rock!!</button>
    <button class="btn" id="btn-paper" type="submit" 
onclick="playRound()">Paper!!</button>
    <button class="btn" id="btn-scissor" type="submit" 
onclick="playRound()">Scissor!!</button>
</div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'javascript initializing variable first undefined after second click set value

Sources

Related Questions