How can I create a function and make it work so that it stores the win case every time user or computer wins?
How can I create a function and make it work so that it stores the win case every time user or computer wins?How can I create a function and make it work so that it stores the win case every time user or computer wins?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Rock Paper Scissors Tutorial</title>
</head>
<body>
<h2>Computer Choice: <span id="computer-choice"></span></h2>
<h2>Your Choice: <span id="user-choice"></span></h2>
<h2>Result: <span id="result"></span></h2>
<button id="rock">rock</button>
<button id="paper">paper</button>
<button id="scissors">scissors</button>
<br>
<br>
<input type="button" value="Reload Page" onClick="document.location.reload(true)">
<br>
<br>
<div class="results">
<div>
You
<span class="result-score">0</span>
</div>
<div data-final-column>
Computer
<span class="result-score">0</span>
</div>
<script src="main.js"></script>
</body>
</html>
--------------------
js
const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
const computerScoreSpan = document.querySelector('[data-computer-score]')
const yourScoreSpan = document.querySelector('[data-your-score]')
let userChoice
let computerChoice
let result
possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
userChoice = e.target.id
userChoiceDisplay.innerHTML = userChoice
generateComputerChoice()
getResult()
}))
// ------
// function incrementScore(scoreSpan) {
// if (yourWinner) incrementScore(yourScoreSpan)
// if (computerWinner) incrementScore(computerScoreSpan)
// scoreSpan.innerText = parseInt(scoreSpan.innerText) + 1
// }
// --------
function generateComputerChoice() {
const randomNumber = Math.floor(Math.random() * 3) + 1 // or you can use possibleChoices.length
if (randomNumber === 1) {
computerChoice = 'rock'
}
if (randomNumber === 2) {
computerChoice = 'scissors'
}
if (randomNumber === 3) {
computerChoice = 'paper'
}
computerChoiceDisplay.innerHTML = computerChoice
}
function getResult() {
if (computerChoice === userChoice) {
result = 'its a draw!'
}
if (computerChoice === 'rock' && userChoice === "paper") {
result = 'you win!'
}
if (computerChoice === 'rock' && userChoice === "scissors") {
result = 'you lost!'
}
if (computerChoice === 'paper' && userChoice === "scissors") {
result = 'you win!'
}
if (computerChoice === 'paper' && userChoice === "rock") {
result = 'you lose!'
}
if (computerChoice === 'scissors' && userChoice === "rock") {
result = 'you win!'
}
if (computerChoice === 'scissors' && userChoice === "paper") {
result = 'you lose!'
}
resultDisplay.innerHTML = result
}
>Solution :
Well for starters your code is really inefficient and messy, and I wouldn’t definitely recommend re-starting. But if you want to keep the code you already have, to make the score counter you don’t need a function, just add to the score based of the result in the result function.
Here’s the updated HTML code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Rock Paper Scissors Tutorial</title>
</head>
<body>
<h2>Computer Choice: <span id="computer-choice"></span></h2>
<h2>Your Choice: <span id="user-choice"></span></h2>
<h2>Result: <span id="result"></span></h2>
<button id="rock">rock</button>
<button id="paper">paper</button>
<button id="scissors">scissors</button>
<br>
<br>
<input type="button" value="Reload Page" onClick="document.location.reload(true)">
<br>
<br>
<div id="ys">
You: 0
</div>
<div id="cs">
Computer: 0
</div>
<script src="main.js"></script>
</body>
</html>
and your javascript code
const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
const cs_t = document.getElementById("cs");
const ps_t = document.getElementById("ys");
let userChoice
let computerChoice
let result
var cs = 0;
var ps = 0;
possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
userChoice = e.target.id
userChoiceDisplay.innerHTML = userChoice
generateComputerChoice()
getResult()
}))
// ------
// --------
function generateComputerChoice() {
const randomNumber = Math.floor(Math.random() * 3) + 1 // or you can use possibleChoices.length
if (randomNumber === 1) {
computerChoice = 'rock'
}
if (randomNumber === 2) {
computerChoice = 'scissors'
}
if (randomNumber === 3) {
computerChoice = 'paper'
}
computerChoiceDisplay.innerHTML = computerChoice
}
function getResult() {
if (computerChoice === userChoice) {
result = 'its a draw!'
}
if (computerChoice === 'rock' && userChoice === "paper") {
result = 'you win!'
}
if (computerChoice === 'rock' && userChoice === "scissors") {
result = 'you lost!'
}
if (computerChoice === 'paper' && userChoice === "scissors") {
result = 'you win!'
}
if (computerChoice === 'paper' && userChoice === "rock") {
result = 'you lose!'
}
if (computerChoice === 'scissors' && userChoice === "rock") {
result = 'you win!'
}
if (computerChoice === 'scissors' && userChoice === "paper") {
result = 'you lose!'
}
if(result == 'you win!'){
ps += 1
}
else if(result == 'you lose!'){
console.log("ok2")
cs += 1
}
else{
cs += 1
ps += 1
}
cs_t.innerHTML = ("Computer: " + cs);
ps_t.innerHTML = ("You: " + ps);
resultDisplay.innerHTML = result
}
also you do not need to put span tags in everything, it’s a really bad way of doing it.