I want to create a simple and quick mini rock paper scissors game. How it works is, when the user clicks the START GAME button it gives the user a random item for example "rock". When the user receives the item, the id "computer-item" should then display:
"Computer: Processing output..."
After 3 seconds it then shows the computer's random item for example paper. This issue is found in the startGame() function. How do I get this to be like that?
I tried using setTimeout so that it would hopefully display after 3 seconds. Any help at all would be much appreciated as I am kind of new to JavaScript.
JavaScript:
let p_item = document.getElementById("player-item");
let cpu_item = document.getElementById("computer-item");
let items = ["Rock", "Paper", "Scissors"];
function getPlayerHand() {
//for (i = 0; i < items.length; i++)
let p_index = Math.floor(Math.random() * 3);
return items[p_index];
}
function getCPUHand() {
//for (i = 0; i < items.length; i++)
let cpu_index = Math.floor(Math.random() * 3);
return items[cpu_index];
}
function startGame() {
p_item.textContent = "Player: " + getPlayerHand();
cpu_item.textContent = "Computer: Processing output...";
setTimeout(getCPUHand, 3000);
cpu_item.textContent = "Computer: " + getCPUHand();
}
function playAgain() {
clearTimeout(getCPUHand);
p_item.textContent = "Player: ";
cpu_item.textContent = "Computer: ";
}<!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">
<title>Document</title>
</head>
<body>
<p id="player-item">Player:</p>
<p id="computer-item">Computer:</p>
<button onclick="startGame()">START GAME</button>
<p>GAME HAS FINISHED
<button onclick="playAgain()">PLAY AGAIN</button>
</p>
<script src="index.js"></script>
</body>
</html>You are calling setTimeout, but the script executes the next line immediately, which already sets the value. Can you try this and see if it works:
function startGame() {
p_item.textContent = "Player: " + getPlayerHand();
cpu_item.textContent = "Computer: Processing output...";
setTimeout(() => {
cpu_item.textContent = "Computer: " + getCPUHand();
}, 3000);
}
setTimeout() runs getCPUHand() 3 seconds later, but it doesn't wait for it. It returns immediately, and then the line cpu_item.textContent = "Computer: " + getCPUHand(); runs. You should put the code that displays the computer hand in the setTimeout() call.
The argument to clearTimeout() should be the value that was returned by setTimeout(). So assign that value to a global variable, which you use when restarting.
let p_item = document.getElementById("player-item");
let cpu_item = document.getElementById("computer-item");
let items = ["Rock", "Paper", "Scissors"];
let timer;
function getPlayerHand() {
//for (i = 0; i < items.length; i++)
let p_index = Math.floor(Math.random() * 3);
return items[p_index];
}
function getCPUHand() {
//for (i = 0; i < items.length; i++)
let cpu_index = Math.floor(Math.random() * 3);
return items[cpu_index];
}
function startGame() {
p_item.textContent = "Player: " + getPlayerHand();
cpu_item.textContent = "Computer: Processing output...";
timer = setTimeout(() => cpu_item.textContent = "Computer: " + getCPUHand(), 3000);
}
function playAgain() {
clearTimeout(timer);
p_item.textContent = "Player: ";
cpu_item.textContent = "Computer: ";
}<!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">
<title>Document</title>
</head>
<body>
<p id="player-item">Player:</p>
<p id="computer-item">Computer:</p>
<button onclick="startGame()">START GAME</button>
<p>GAME HAS FINISHED
<button onclick="playAgain()">PLAY AGAIN</button>
</p>
<script src="index.js"></script>
</body>
</html>let p_item = document.getElementById("player-item");
let cpu_item = document.getElementById("computer-item");
let items = ["Rock", "Paper", "Scissors"];
let timeoutHandler = null;
function getPlayerHand() {
//for (i = 0; i < items.length; i++)
let p_index = Math.floor(Math.random() * 3);
return items[p_index];
}
function getCPUHand() {
//for (i = 0; i < items.length; i++)
let cpu_index = Math.floor(Math.random() * 3);
return items[cpu_index];
}
function startGame() {
p_item.textContent = "Player: " + getPlayerHand();
cpu_item.textContent = "Computer: Processing output...";
timeoutHandler = setTimeout(()=>{
getCPUHand();
cpu_item.textContent = "Computer: " + getCPUHand();
}, 3000);
}
function playAgain() {
clearTimeout(timeoutHandler );
p_item.textContent = "Player: ";
cpu_item.textContent = "Computer: ";
}<!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">
<title>Document</title>
</head>
<body>
<p id="player-item">Player:</p>
<p id="computer-item">Computer:</p>
<button onclick="startGame()">START GAME</button>
<p>GAME HAS FINISHED
<button onclick="playAgain()">PLAY AGAIN</button>
</p>
<script src="index.js"></script>
</body>
</html>