Proper way of selecting created element?

Proper way of selecting created element? - javascript

I am getting an error message of TypeError: Node.removeChild: Argument 1 is not an object when trying to select my 'resetBtn' in my removeReset() function. You will have to click the game until you or the player wins five times. The reset button shows up, it gets clicked and even though it goes away I still get this error.
What is the proper way to target this element?
The error message is coming from this
document.body.removeChild(document.querySelector('#buttonReset'));
In the removeReset(). Below is the javascript and html code. Thank you
const resetBtn = document.createElement("button");
resetBtn.id = 'buttonReset';
const rock = document.getElementById('submitRock');
const paper = document.getElementById('submitPaper');
const scissors = document.getElementById('submitScissors');
rock.addEventListener("click", function() {
choices = ['rock', 'paper', 'scissors'];
playRound(choices[0]);
});
paper.addEventListener('click', function() {
choices = ['rock', 'paper', 'scissors'];
playRound(choices[1]);
});
scissors.addEventListener('click', function() {
choices = ['rock', 'paper', 'scissors'];
playRound(choices[2]);
});
function updateScore() {
if (document.getElementById("ps").innerText === '5') {
document.getElementById("finalScore").innerText = `Player Wins!`;
alert('Player Wins')
remove();
} else if (document.getElementById("cs").innerText === '5') {
document.getElementById("finalScore").innerText = `Computer Wins!`;
alert('Computer Wins')
remove();
}
}
function playRound(playerChoice) {
computerChoice = choices[Math.floor(Math.random() * 3)]
if (computerChoice === choices[0] && playerChoice === choices[2]) {
document.getElementById("cs").innerText = Number(document.getElementById("cs").innerText) + 1;
updateScore();
} else if (computerChoice === choices[1] && playerChoice === choices[0]) {
document.getElementById("cs").innerText = Number(document.getElementById("cs").innerText) + 1;
updateScore();
} else if (computerChoice === choices[2] && playerChoice === choices[1]) {
document.getElementById("cs").innerText = Number(document.getElementById("cs").innerText) + 1;
updateScore();
} else if (computerChoice === playerChoice) {
document.getElementById('scoreboard').textContent = `Draw! Computer picked ${computerChoice} and you picked ${playerChoice}!`;
updateScore();
} else document.getElementById('scoreboard').textContent = `You win! You picked ${playerChoice} and the computer picked ${computerChoice}.`;
document.getElementById("ps").innerText = Number(document.getElementById("cs").innerText) + 1;
updateScore();
}
function remove() {
document.getElementById("ps").innerText = 0;
document.getElementById("cs").innerText = 0;
resetBtn.innerText = 'Reset';
resetBtn.setAttribute("style",
`display: block; margin: 0 auto 7.5rem auto; background-color: blue; color: white; padding: 2rem; font-size: 5rem; `);
document.getElementById('rock').removeChild(rock);
document.getElementById('paper').removeChild(paper);
document.getElementById('scissors').removeChild(scissors);
document.getElementById('body').appendChild(resetBtn);
}
function removeReset() {
document.body.removeChild(document.querySelector('#buttonReset'));
document.getElementById('rock').appendChild(rock);
document.getElementById('paper').appendChild(paper);
document.getElementById('scissors').appendChild(scissors);
}
resetBtn.addEventListener('click', function() {
removeReset();
});
resetBtn.addEventListener('click', function() {
removeReset();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="index.css" />
</head>
<body id="body">
<h1 class="title">Welcome to Rock, Paper, Scissors!</h1>
<h2 class="title-sub">Against the computer....</h2>
<h1 id="scoreboard"></h1>
<h1 id="finalScore"></h1>
<div id="scoreContainer">
<div id="playerScore">
<h3 class="playersTitle playerColor">Player</h3>
<p id="ps"></p>
</div>
<div id="computerScore">
<h3 class="playersTitle computerColor">Computer</h3>
<p id="cs"></p>
</div>
</div>
<div id="options">
<div id="rock">
<button id="submitRock">ROCK</button>
</div>
<div id="paper">
<button id="submitPaper">PAPER</button>
</div>
<div id="scissors">
<button id="submitScissors">SCISSORS</button>
</div>
</div>
<div id='resetContainer'></div>
<p id="winner"></p>
<script type="text/javascript" src="console.js"></script>
</body>
</html>

You are setting 2 listeners on the click of the resetBtn:
resetBtn.addEventListener('click', function() {
removeReset();
});
resetBtn.addEventListener('click', function() {
removeReset();
});
So when you click on reset, both the listeners are triggered ; the first listener works well, but the second can't remove the element because it doesn't exist anymore.
Just remove one of the listener and it will work well.

Don't append and remove the button. Put it in the HTML, and change its display style.
You also have redundant click listeners, as mentioned in the other answer. If you use this solution, you won't get an error because of it, but you should still remove the extra one.
const resetBtn = document.querySelector("#buttonReset");
const rock = document.getElementById('submitRock');
const paper = document.getElementById('submitPaper');
const scissors = document.getElementById('submitScissors');
rock.addEventListener("click", function() {
choices = ['rock', 'paper', 'scissors'];
playRound(choices[0]);
});
paper.addEventListener('click', function() {
choices = ['rock', 'paper', 'scissors'];
playRound(choices[1]);
});
scissors.addEventListener('click', function() {
choices = ['rock', 'paper', 'scissors'];
playRound(choices[2]);
});
function updateScore() {
if (document.getElementById("ps").innerText === '5') {
document.getElementById("finalScore").innerText = `Player Wins!`;
alert('Player Wins')
remove();
} else if (document.getElementById("cs").innerText === '5') {
document.getElementById("finalScore").innerText = `Computer Wins!`;
alert('Computer Wins')
remove();
}
}
function playRound(playerChoice) {
computerChoice = choices[Math.floor(Math.random() * 3)]
if (computerChoice === choices[0] && playerChoice === choices[2]) {
document.getElementById("cs").innerText = Number(document.getElementById("cs").innerText) + 1;
updateScore();
} else if (computerChoice === choices[1] && playerChoice === choices[0]) {
document.getElementById("cs").innerText = Number(document.getElementById("cs").innerText) + 1;
updateScore();
} else if (computerChoice === choices[2] && playerChoice === choices[1]) {
document.getElementById("cs").innerText = Number(document.getElementById("cs").innerText) + 1;
updateScore();
} else if (computerChoice === playerChoice) {
document.getElementById('scoreboard').textContent = `Draw! Computer picked ${computerChoice} and you picked ${playerChoice}!`;
updateScore();
} else document.getElementById('scoreboard').textContent = `You win! You picked ${playerChoice} and the computer picked ${computerChoice}.`;
document.getElementById("ps").innerText = Number(document.getElementById("cs").innerText) + 1;
updateScore();
}
function remove() {
document.getElementById("ps").innerText = 0;
document.getElementById("cs").innerText = 0;
document.getElementById('rock').removeChild(rock);
document.getElementById('paper').removeChild(paper);
document.getElementById('scissors').removeChild(scissors);
resetBtn.style.display = "block";
}
function removeReset() {
resetBtn.style.display = "none";
document.getElementById('rock').appendChild(rock);
document.getElementById('paper').appendChild(paper);
document.getElementById('scissors').appendChild(scissors);
}
resetBtn.addEventListener('click', function() {
removeReset();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="index.css" />
</head>
<body id="body">
<h1 class="title">Welcome to Rock, Paper, Scissors!</h1>
<h2 class="title-sub">Against the computer....</h2>
<h1 id="scoreboard"></h1>
<h1 id="finalScore"></h1>
<div id="scoreContainer">
<div id="playerScore">
<h3 class="playersTitle playerColor">Player</h3>
<p id="ps"></p>
</div>
<div id="computerScore">
<h3 class="playersTitle computerColor">Computer</h3>
<p id="cs"></p>
</div>
</div>
<div id="options">
<div id="rock">
<button id="submitRock">ROCK</button>
</div>
<div id="paper">
<button id="submitPaper">PAPER</button>
</div>
<div id="scissors">
<button id="submitScissors">SCISSORS</button>
</div>
</div>
<div id='resetContainer'></div>
<p id="winner"></p>
<button id="buttonReset" style="display: none; margin: 0 auto 7.5rem auto; background-color: blue; color: white; padding: 2rem; font-size: 5rem;">Reset</button>
<script type="text/javascript" src="console.js"></script>
</body>
</html>

Related

My function (using an event listener) doesn't seem to give the expected output. How can I fix it?

EDIT: I was able to make it kind of work using the onclick function directly in the html, but I would like to know how to make it work with an event listener, so pls still help with this. Thanks guys
So, I'm new at this, and am trying to make an app that lets you play a rock paper scissors game first to 5 against a robot. It's part of The Odin Project.
I haven't yet implemented the best to five bit of it, as I'm just trying to make my buttons work :(
My event listener seems to be working fine, but I still get a "NULL" player choice no matter which button is pressed, when obviously I should be getting "ROCK", "PAPER", or "SCISSORS".
Would someone mind pointing out where I'm going wrong?
Here's my Javascript:
let playerChoice = "NULL"
let computerChoice = "NULL"
let playerScore = 0
let computerScore = 0
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1) + min);
}
function getComputerChoice() {
let numChoice = getRandomInt(1,3);
let computerChoice = "NULL"
if (numChoice == 1) {
computerChoice = "ROCK";
} else if (numChoice == 2) {
computerChoice = "PAPER";
} else if (numChoice == 3){
computerChoice = "SCISSORS";
} else {
computerChoice = "NULL";
}
return computerChoice
}
function playerChoiceRock() {
playerChoice = "ROCK"
}
function playerChoiceScissors() {
playerChoice = "SCISSORS"
}
function playerChoicePaper() {
playerChoice = "PAPER"
}
function getPlayerChoice() {
document.getElementById("rockButton").addEventListener("click", playerChoiceRock)
document.getElementById("scissorsButton").addEventListener("click", playerChoiceScissors)
document.getElementById("paperButton").addEventListener("click", playerChoicePaper)
return playerChoice
}
function playRound() {
scoreComputer = document.getElementById("computerScore").innerHTML
scorePlayer = document.getElementById("playerScore").innerHTML
computerChoice = getComputerChoice()
playerChoice = getPlayerChoice()
if (computerChoice == "ROCK" && playerChoice == "PAPER") {
scorePlayer = scorePlayer + 1
} else if (computerChoice == "ROCK" && playerChoice == "SCISSORS") {
scoreComputer = scoreComputer + 1
} else if (computerChoice == "PAPER" && playerChoice == "SCISSORS") {
scorePlayer = scorePlayer + 1
} else if (computerChoice == "PAPER" && playerChoice == "ROCK") {
scoreComputer = scoreComputer + 1
} else if (computerChoice == "SCISSORS" && playerChoice == "PAPER") {
scoreComputer = scoreComputer + 1
} else if (computerChoice == "SCISSORS" && playerChoice == "ROCK") {
scorePlayer = scorePlayer + 1
} else {
scorePlayer = scorePlayer
scoreComputer = scoreComputer
}
alert(playerChoice)
document.getElementById("playerScore").innerHTML = scorePlayer
document.getElementById("computerScore").innerHTML = scoreComputer
}
And here's my 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">
<title>Rock, Paper, Scissors</title>
</head>
<script src = "./script.js"></script>
<body>
<div>
<h1 style="display:flex; justify-content:center">Welcome To Rock, Paper Scissors.<h1></h1>
<h3 style="display:flex; justify-content: center;">The directions are simple. You will play against a computer in Rock, Paper, Scissors best out of 5. Choose a weapon from the menu, and hope that luck is on your side!</h3>
<h2 style="display: flex; justify-content: center;font-weight: bold;"><br><br>Rock beats Scissors, Scissors beats Paper, Paper beats Rock</h2>
</div>
<br>
<br>
<br>
<br>
<div style = "display: flex; justify-content: space-around;">
<button id = "rockButton" style = "display: flex; flex-direction: column; justify-content: center;" id = "Rock" onclick="playRound()">
<img src = ./stone.png alt = "image of a rock" height = "100px" width = "auto">
<p style="margin-left: auto; margin-right: auto">Rock</p>
</button>
<button id = "paperButton" style = "display: flex; flex-direction: column; justify-content: center;" id = "Paper" onclick="playRound()">
<img src = ./paper.png alt = "image of a Paper" height = "100px" width = "auto">
<p style="margin-left: auto; margin-right: auto">Paper</p>
</button>
<button id = "scissorsButton" style = "display: flex; flex-direction: column; justify-content: center;" id = "Scissors" onclick="playRound()">
<img src = ./scissors.png alt = "image of Scisors" height = "100px" width = "auto">
<p style="margin-left: auto; margin-right: auto">Scissors</p>
</button>
</div>
<div style = "display: flex; justify-content: center;">
<div style = "display: flex; justify-content: space-around; white-space: nowrap; width: 70%;">
<div style = "display: flex; white-space: nowrap;">
<h1><br><br><br>Your Score: <h1 id = "playerScore" style = "margin-left: 5%; margin-right: 5%;"><br><br><br>0</h1></h1>
</div>
<div style = "display: flex; white-space: nowrap; justify-content: center;">
<h1><br><br><br>Computer's Score: <h1 id = "computerScore" style = "margin-left: 5%; margin-right: 5%;"><br><br><br>0</h1></h1>
</div>
</div>
</div>
<div style = "display: flex; justify-content: center;">
<h1 style = "font: 40px; display: flex;"><br>Game Result</h1>
<h1 id = "gameResult"></h1>
</div>
<div>
</body>
</html>
Thanks all. I've tried to shuffle around the order in which the functions are executed, but it hasn't worked. Sorry if I'm asking a simple question, I'm pretty new and stumped :D

Event listeners are fired after the listened events were invoked. In your case, you need to add the event listener before fetching player choice, which should be in the very beginning of your code.
let playerChoice = "NULL"
let computerChoice = "NULL"
let playerScore = 0
let computerScore = 0
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1) + min);
}
function getComputerChoice() {
let numChoice = getRandomInt(1, 3);
let computerChoice = "NULL"
if (numChoice == 1) {
computerChoice = "ROCK";
} else if (numChoice == 2) {
computerChoice = "PAPER";
} else if (numChoice == 3) {
computerChoice = "SCISSORS";
} else {
computerChoice = "NULL";
}
return computerChoice
}
function playerChoiceRock() {
playerChoice = "ROCK"
}
function playerChoiceScissors() {
playerChoice = "SCISSORS"
}
function playerChoicePaper() {
playerChoice = "PAPER"
}
function getPlayerChoice() {
return playerChoice
}
// add event listeners
document.getElementById("rockButton").addEventListener("click", playerChoiceRock)
document.getElementById("scissorsButton").addEventListener("click", playerChoiceScissors)
document.getElementById("paperButton").addEventListener("click", playerChoicePaper)
function playRound() {
scoreComputer = document.getElementById("computerScore").innerHTML
scorePlayer = document.getElementById("playerScore").innerHTML
computerChoice = getComputerChoice()
playerChoice = getPlayerChoice()
if (computerChoice == "ROCK" && playerChoice == "PAPER") {
scorePlayer = scorePlayer + 1
} else if (computerChoice == "ROCK" && playerChoice == "SCISSORS") {
scoreComputer = scoreComputer + 1
} else if (computerChoice == "PAPER" && playerChoice == "SCISSORS") {
scorePlayer = scorePlayer + 1
} else if (computerChoice == "PAPER" && playerChoice == "ROCK") {
scoreComputer = scoreComputer + 1
} else if (computerChoice == "SCISSORS" && playerChoice == "PAPER") {
scoreComputer = scoreComputer + 1
} else if (computerChoice == "SCISSORS" && playerChoice == "ROCK") {
scorePlayer = scorePlayer + 1
} else {
scorePlayer = scorePlayer
scoreComputer = scoreComputer
}
alert(playerChoice)
document.getElementById("playerScore").innerHTML = scorePlayer
document.getElementById("computerScore").innerHTML = scoreComputer
}
// add event listeners after the choice event
document.getElementById("rockButton").addEventListener("click", playRound)
document.getElementById("scissorsButton").addEventListener("click", playRound)
document.getElementById("paperButton").addEventListener("click", playRound)
<!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>Rock, Paper, Scissors</title>
</head>
<script src="./script.js"></script>
<body>
<div>
<h1 style="display:flex; justify-content:center">Welcome To Rock, Paper Scissors.
<h1></h1>
<h3 style="display:flex; justify-content: center;">The directions are simple. You will play against a computer in Rock, Paper, Scissors best out of 5. Choose a weapon from the menu, and hope that luck is on your side!</h3>
<h2 style="display: flex; justify-content: center;font-weight: bold;"><br><br>Rock beats Scissors, Scissors beats Paper, Paper beats Rock</h2>
</div>
<br>
<br>
<br>
<br>
<div style="display: flex; justify-content: space-around;">
<button id="rockButton" style="display: flex; flex-direction: column; justify-content: center;" id="Rock">
<img src = ./stone.png alt = "image of a rock" height = "100px" width = "auto">
<p style="margin-left: auto; margin-right: auto">Rock</p>
</button>
<button id="paperButton" style="display: flex; flex-direction: column; justify-content: center;" id="Paper">
<img src = ./paper.png alt = "image of a Paper" height = "100px" width = "auto">
<p style="margin-left: auto; margin-right: auto">Paper</p>
</button>
<button id="scissorsButton" style="display: flex; flex-direction: column; justify-content: center;" id="Scissors">
<img src = ./scissors.png alt = "image of Scisors" height = "100px" width = "auto">
<p style="margin-left: auto; margin-right: auto">Scissors</p>
</button>
</div>
<div style="display: flex; justify-content: center;">
<div style="display: flex; justify-content: space-around; white-space: nowrap; width: 70%;">
<div style="display: flex; white-space: nowrap;">
<h1><br><br><br>Your Score:
<h1 id="playerScore" style="margin-left: 5%; margin-right: 5%;"><br><br><br>0</h1>
</h1>
</div>
<div style="display: flex; white-space: nowrap; justify-content: center;">
<h1><br><br><br>Computer's Score:
<h1 id="computerScore" style="margin-left: 5%; margin-right: 5%;"><br><br><br>0</h1>
</h1>
</div>
</div>
</div>
<div style="display: flex; justify-content: center;">
<h1 style="font: 40px; display: flex;"><br>Game Result</h1>
<h1 id="gameResult"></h1>
</div>
<div>
</body>
</html>
Also note that you need to invoke the playRound function after playerChoice**** listeners. To do that, simply remove the inline listener and add the playRound listeners after adding playerChoice listeners.

First, please check all your elements' id attribute.
You should set only one id in an element.
It's because your event doesn't pass to your function.
Base on this solution
You can use this function to bind your button
function showEvent(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
}
e.g.
<button id="scissorsButton" onclick="showEvent(event)">
Then, you could see the event object in your browser console.

Button array is empty after I copied from another array that has the whole set of HTMLCollection

I want to store all the existing button names into an array(copyAllButtons) by using the push function.
However, after the for-loop, there is still nothing inside copyAllButtons.
I am trying to make a reset function that required the array(copyAllButtons) to restore all the button names saved.
Can anyone help me? Thank you.
var all_buttons = document.getElementsByTagName('button'); //all button names are saved
var copyAllButtons = [];
console.log(all_buttons);
for (let i = 0; i < all_buttons.length; i++) {
copyAllButtons.push(all_buttons[i].classList[1]);
}
console.log(copyAllButtons); //####Button array is empty####
This is my file:
https://drive.google.com/file/d/1qbAAHClxJhNQUFyvrSklbGwX9tbsEsL8/view?usp=sharing
message of console.log(copyAllButtons)
element inside all_buttons
code related:JS
//challenge4
var all_buttons = document.getElementsByTagName('button'); //all button names are saved
var copyAllButtons = [];
console.log(all_buttons);
for (let i = 0; i < all_buttons.length; i++) {
copyAllButtons.push(all_buttons[i].classList[1]);
}
console.log(copyAllButtons); //####Button array is empty####
function buttonColorChange(buttonThingy) {
if (buttonThingy.value === 'red') {
buttonsRed();
} else if (buttonThingy.value === 'green') {
buttonsGreen();
} else if (buttonThingy.value === 'reset') {
buttonsColorReset();
} else if (buttonThingy.value === 'random') {
randomColors();
}
}
function buttonsRed() {
for (let i = 0; i < all_buttons.length; i++) {
all_buttons[i].className = 'btn btn-danger';
}
}
function buttonsGreen() {
for (let i = 0; i < all_buttons.length; i++) {
all_buttons[i].className = 'btn btn-success';
}
}
function buttonsColorReset() { //##function that i am working on##
for (let i = 0; i < all_buttons.length; i++) {
all_buttons[i].classList.remove(all_buttons[i].classList[1]);
all_buttons[i].classList.add(copyAllButtons[i]);
}
}
function randomColors() {
for (let i = 0; i < all_buttons.length; i++) {
var x = Math.floor(Math.random() * 4);
var y = ['btn-primary', 'btn-danger', 'btn-warning', 'btn-success'];
all_buttons[i].className = 'btn ' + y[x];
}
}
HTML
<div class="container-4">
<h2 id="change-my-color">Challenge 4:Change the color of all buttons</h2>
<div class="flex-box-pick-color">
<form action="">
<select name="backdrop" id="background" onChange="buttonColorChange(this)">
<option value="random">Random</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="reset">Reset</option>
</select>
</form>
<button class="btn btn-primary">Wee!</button>
<button class="btn btn-danger">Yahoo!</button>
<button class="btn btn-warning">Google!</button>
<button class="btn btn-success">Facebook!</button>
</div>
</div>
CSS:
.container-1, .container-2 , .container-3 ,.container-4{
border: 1px solid blue;
width:75%;
margin: 0 auto;
text-align: center;
}
.flex-box-container-1, .flex-box-container-2,.flex-box-rps,.flex-box-pick-color{
display:flex;
border:1px solid purple;
padding: 10px;
flex-wrap:wrap;
flex-direction: row;
justify-content: space-around;
}
All my code for reference:
javascript:
function ageInDays() {
var birthYear = prompt("What year were you born?")
var days = (2021 - birthYear) * 365
var h1 = document.createElement('h1')
var textAnswer = document.createTextNode('You are ' + days + ' days old')
h1.setAttribute('id', 'days');
h1.appendChild(textAnswer)
document.getElementById('flex-box-result').appendChild(h1)
}
function reset() {
document.getElementById('days').remove()
}
function generateCat() {
var image = document.createElement('img');
var div = document.getElementById('flex-cat-gen');
image.src = "https://thecatapi.com/api/images/get?format=src&type=gif&size=small";
div.appendChild(image);
}
//challenge3 rock paper scissors
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
function randToRpsInt() {
return Math.floor(Math.random() * 3);
}
function numberToChoice(number) {
return ['rock', 'paper', 'scissors'][number]
}
function rpsGame(yourChoice) {
var result;
console.log(yourChoice.id);
var humanChoice, botChoice;
var message
humanChoice = yourChoice.id;
botChoice = numberToChoice(randToRpsInt());
console.log(botChoice);
if (humanChoice === 'rock') {
if (botChoice === 'rock') {
result = "tie"
console.log("tie");
}
else if (botChoice === 'paper') {
result = "lost"
console.log("You Lost>_<");
}
else {
result = "win"
console.log("You Win OAO");
}
}
else if (humanChoice === 'paper') {
if (botChoice === 'rock') {
result = "win";
console.log("You Win OAO");
}
else if (botChoice === 'scissors') {
result = "lost";
console.log("You Lost>_<");
}
else {
result = "tie";
console.log("tie");
}
}
//scissors
else {
if (botChoice === 'paper') {
result = "win";
console.log("You Win OAO");
}
else if (botChoice === 'rock') {
result = "lost";
console.log("You Lost>_<");
}
else {
result = "tie";
console.log("tie");
}
}
message = finalMessage(result);
rpsFrontEnd(humanChoice, botChoice, message);
}
function finalMessage(result) {
if (result === "lost")
return { 'message': 'You lost!', 'color': 'red' };
else if (result === "win")
return { 'message': 'You won!', 'color': 'green' };
else
return { 'message': 'You tied!', 'color': 'yellow' };
}
function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) {
var imagesDatabase = {
'rock': document.getElementById('rock').src,
'paper': document.getElementById('paper').src,
'scissors': document.getElementById('scissors').src
}
document.getElementById('rock').remove();
document.getElementById('paper').remove();
document.getElementById('scissors').remove();
var humanDiv = document.createElement('div');
var botDiv = document.createElement('div');
var messageDiv = document.createElement('div');
humanDiv.innerHTML = "<img src='" + imagesDatabase[humanImageChoice] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(37,50,233,1);'>"
botDiv.innerHTML = "<img src='" + imagesDatabase[botImageChoice] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(3243,38,24,1);'>"
messageDiv.innerHTML = "<h1 style='color: " + finalMessage['color'] + "; font-size: 60px;padding:30px; '>" + finalMessage['message'] + "</h1>"
document.getElementById('flex-box-rps-div').appendChild(humanDiv);
document.getElementById('flex-box-rps-div').appendChild(messageDiv);
document.getElementById('flex-box-rps-div').appendChild(botDiv);
}
//challenge4
var all_buttons = document.getElementsByTagName('button'); //all button names are saved
var copyAllButtons = [];
console.log(all_buttons);
for (let i = 0; i < all_buttons.length; i++) {
copyAllButtons.push(all_buttons[i].classList[1]);
}
console.log(copyAllButtons); //####Button array is empty####
function buttonColorChange(buttonThingy) {
if (buttonThingy.value === 'red') {
buttonsRed();
} else if (buttonThingy.value === 'green') {
buttonsGreen();
} else if (buttonThingy.value === 'reset') {
buttonsColorReset();
} else if (buttonThingy.value === 'random') {
randomColors();
}
}
function buttonsRed() {
for (let i = 0; i < all_buttons.length; i++) {
all_buttons[i].className = 'btn btn-danger';
}
}
function buttonsGreen() {
for (let i = 0; i < all_buttons.length; i++) {
all_buttons[i].className = 'btn btn-success';
}
}
function buttonsColorReset() { //##function that i am working on##
for (let i = 0; i < all_buttons.length; i++) {
all_buttons[i].classList.remove(all_buttons[i].classList[1]);
all_buttons[i].classList.add(copyAllButtons[i]);
}
}
function randomColors() {
for (let i = 0; i < all_buttons.length; i++) {
var x = Math.floor(Math.random() * 4);
var y = ['btn-primary', 'btn-danger', 'btn-warning', 'btn-success'];
all_buttons[i].className = 'btn ' + y[x];
}
}
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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>challenge game</title>
</head>
<body>
<script src="home.js"></script>
<div class="container-1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flex-box-container-1">
<div> <button class="btn btn-primary" onclick="ageInDays()">Click Me</button></div>
<div> <button class="btn btn-danger" onclick="reset()">Reset</button></div>
</div>
</div>
<div class="flex-box-container-1">
<div id="flex-box-result">
</div>
</div>
<div class="container-2">
<h2>Challenge 2: Cat Generator</h2>
<button class="btn btn-success" id="cat-generator" onClick="generateCat()">Generate Cat</button>
<div class="flex-box-container-2" id="flex-cat-gen">
</div>
</div>
<div class="container-3">
<h2>Challenge 3:Rock,Paper,Scissors</h2>
<div class="flex-box-rps" id="flex-box-rps-div">
<img id="rock" src="https://cdn.drawception.com/images/panels/2017/2-4/wqmCPbxybn-4.png" alt=""
onClick="rpsGame(this)" width="250" height="250">
<img id="paper" src="https://sc04.alicdn.com/kf/UTB8apntp0nJXKJkSaiyq6AhwXXaR.jpg" alt="" onClick="rpsGame(this)"
width="250" height="250">
<img id="scissors" src="https://www.collinsdictionary.com/images/full/scissors_100136453.jpg" alt=""
onClick="rpsGame(this)" width="250" height="250">
</div>
</div>
<div class="container-4">
<h2 id="change-my-color">Challenge 4:Change the color of all buttons</h2>
<div class="flex-box-pick-color">
<form action="">
<select name="backdrop" id="background" onChange="buttonColorChange(this)">
<option value="random">Random</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="reset">Reset</option>
</select>
</form>
<button class="btn btn-primary">Wee!</button>
<button class="btn btn-danger">Yahoo!</button>
<button class="btn btn-warning">Google!</button>
<button class="btn btn-success">Facebook!</button>
</div>
</div>
</body>
</html>
CSS:
.container-1, .container-2 , .container-3 ,.container-4{
border: 1px solid blue;
width:75%;
margin: 0 auto;
text-align: center;
}
.flex-box-container-1, .flex-box-container-2,.flex-box-rps,.flex-box-pick-color{
display:flex;
border:1px solid purple;
padding: 10px;
flex-wrap:wrap;
flex-direction: row;
justify-content: space-around;
}
.flex-box-container-1 div{
display:flex;
padding: 10px;
border: 1 px solid black;
align-items: center;
}
.flex-box-container-2 img{
margin:10px;
box-shadow: 0px 10px 50px rgba(0,0,0,0.7);
}
.flex-box-rps img:hover{
box-shadow: 0px 10px 50px rgba(37,50,233,1);
}

Map button properties to a new array for later use, a minimal reproducable example.
// map button.btn properties to strings with id and class list
const all_buttons = [...document.querySelectorAll('button.btn')]
.map(b => `button#${b.id}, class: ${[...b.classList].join(', ')}`);
console.log(all_buttons);
// so ...
// save original classNames
const initialButtonClasses = [...document.querySelectorAll('button')]
.map(bttn => [...bttn.classList]);
// replacement classes
const green = [`btn`, `green`];
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.dataset.reset) {
return document.querySelectorAll('button.btn')
.forEach((btn, i) => {
btn.classList.remove(...btn.classList);
btn.classList.add(...initialButtonClasses[i]);
});
}
if (evt.target.dataset.green) {
return document.querySelectorAll('button.btn')
.forEach((btn, i) => {
btn.classList.remove(...btn.classList);
btn.classList.add(...green);
});
}
}
.green {
color: green;
}
<button id="a" class="btn z">bttnA</button>
<button id="b" class="btn y">bttnB</button>
<button id="c" class="btn x">bttnC</button>
<button data-green="1">all green</button>
<button data-reset="1">reset</button>

After searching for a long time, I found that I made a mistake in index.html, script tag should be put at the end of the body.

Function that assigns new value appears to initially work the first time, but doesn't appear to return to beginning of if statement the second time

I am in the middle of the Pig Dice problem and I am trying to use the function switchPlayers() to switch between player1 and player2. When clicking "Roll Dice", it appears to switch to the second player but then no longer switches to the first player. After re-working it a few times, I'm starting to think the issue may be that even if Player2 updates to .isTurn = false the function is longer being called? I appreciate any pointers here (Note, haven't worked on the New Game or Hold Button yet)Thank you!
JSFiddle
//business logic for dice
function Dice() {
this.diceValue = 1;
this.roll = 0;
}
function Player() {
this.score = 0;
this.dice = new Dice()
this.isTurn = true
}
//global Players
player1 = new Player();
player2 = new Player();
function switchPlayers() {
if (player1.dice.roll === 0) {
player1.isTurn = false;
} else if (player2.dice.roll === 0) {
player2.isTurn = false;
}
}
Dice.prototype.rollDice = function() {
this.diceValue = Math.floor((Math.random() * 6) + 1);
if (this.diceValue === 1) {
this.roll = 0;
} else {
this.roll = this.diceValue;
}
}
Player.prototype.calcScore = function() {
this.dice.rollDice()
if (this.dice.roll === 0) {
switchPlayers();
} else {
this.score += this.dice.roll
}
}
//ui logic
$(document).ready(function() {
$("button.btn-roll").click(function(event) {
if (player1.isTurn !== false) {
player1.calcScore();
$('#p1-total').html(player1.score);
$('#p1-roll').html(player1.dice.roll);
} else if (player2.isTurn === true) {
player2.calcScore();
$('#p2-total').html(player2.score);
$('#p2-roll').html(player2.dice.roll)
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/scripts.js"></script>
<title>Pig Dice!</title>
</head>
<body>
<div class="wrapper clearfix">
<div class="player-1-panel active">
<div class="player-name" id="name-0">Player 1</div>
<div class="player1-score">
<p>this roll points: <span id="p1-roll"></span></p>
<p>
total: <span id="p1-total"></span>
</p>
</div>
</div>
</div>
<div class="player-2-panel">
<div class="player-name" id="name-1">Player 2</div>
<div class="player1-score">
<p>this roll: <span id="p2-roll"></span></p>
<p>
total: <span id="p2-total"></span>
</p>
</div>
</div>
</div>
<button class="btn-new"><i class="ion-ios-checkmark"></i>New game</button>
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
<button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>
<img src="img/die5.png" alt="Dice" class="dice die1">
</div>
</body>
</html>

Keeping your logic, i have reviewed your code, added some tips (button hold), so you could easily understant what i have done and increase yours skills:
function initGame(){
//selectRandomly wich players begins
idToPlay = Math.floor((Math.random()*maxNumberPlayers));
for(let p = 0;p < maxNumberPlayers;p++){
let id = '#p' + p;
$(id + '-action').html('');
$(id + '-name').text(players[p].name);
$(id + '-total').html(players[p].score);
$(id + '-roll').html('--');
$(id + '-round').html('--');
$(id + '-dice').html('--');
}
$('#p' + idToPlay + '-action').html('<b>** Its your turn! **</>');
}
//business logic for dice
function Dice() {
this.diceValue=1;
this.roll=0;
this.round=0;
}
function Player(name) {
this.name = name
this.score = 0;
players.push(this);
}
//global Players
players = [];
new Player("John");
new Player("Peter");
maxNumberPlayers = players.length;
dice = new Dice();
idToPlay = -1;//first player will be choosen by initGame
function switchPlayers() {
displayResult();
if(++idToPlay == maxNumberPlayers) idToPlay = 0;
dice.round = 0;
$( 'span[id$="-action"]').html('');
$('#p' + idToPlay + '-action').html('<b>** Its your turn! **</>');
}
Dice.prototype.rollDice = function() {
this.diceValue = Math.floor((Math.random()*6)+1);
if (this.diceValue === 1) {
this.roll = 0;
this.round = 0
} else {
this.roll = this.diceValue;
this.round += this.roll;
}
}
Player.prototype.calcScore = function(isHoldButton = false) {
dice.rollDice();
if (dice.roll === 0) {
dice.round = 0;
switchPlayers();
} else {
this.round += dice.roll;
displayResult();
}
}
function displayResult(){
let id = '#p' + idToPlay;
$(id + '-name').html(players[idToPlay].name);
$(id + '-total').html(players[idToPlay].score);
$(id + '-roll').html(dice.roll);
$(id + '-round').html(dice.round);
$(id + '-dice').html(dice.diceValue);
}
//ui logic
$(document).ready(function() {
initGame();
$("button.btn-roll").click(function() {
players[idToPlay].calcScore();
});
$("button.btn-hold").click(function() {
players[idToPlay].score += dice.round;
switchPlayers();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/scripts.js"></script>
<title>Pig Dice!</title>
</head>
<body>
<p>Rule: If you roll a 1, you will receive 0 roll points for the round and it will be the other player's turn.
</p>
<div class="wrapper clearfix">
<div class="player-0-panel active">
<div class="player-name"><span id="p0-name">Player 1</span><span> </span><span id="p0-action"></span></div>
<div class="player0-score">
<p>Dice points:<span id="p0-dice"></span>
<span> </span>Roll points:<span id="p0-roll"></span>
<span> </span>Round points:<span id="p0-round"></span>
<span> </span>total:<span id="p0-total"></span>
</p>
</div>
</div>
<div class="player-1-panel">
<div class="player-name"><span id="p1-name">Player 1</span><span> </span><span id="p1-action"></span></div>
<div class="player1-score">
<p>Dice points:<span id="p1-dice"></span>
<span> </span>Roll points:<span id="p1-roll"></span>
<span> </span>Round points:<span id="p1-round"></span>
<span> </span>total:<span id="p1-total"></span>
</p>
</div>
</div>
<button class="btn-new"><i class="ion-ios-checkmark"></i>New game</button>
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
<button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>
<img src="img/die5.png" alt="Dice" class="dice die1">
</div>
</body>
</html>

Javascript: How to check the winning state of all boxes/cells in a Tic Tac Toe game?

Ive attempted to make Tic Tac Toe as a javascript learning project and Im currently testing the first row winning state for Player 1, but for some reason every time the 3rd box is clicked regardless if the 1st and 2nd box has been clicked, it displays the winning message. Obviously thats not how tic tac toe works, as you need 3 in a row not 1 or 2.
Im using 2 arrays to test the winning state. 1 array for the boxes that have been already been clicked by the player, and 1 array that contains the winning combination for the first row. My goal was to test using an if statement to see if the boxes already clicked by the player matches the ones in the array with the winning combo.
I have tried using the .every method
for(let i=0;i<fRowBoxes.length;i++){
let fRowWin= () => X_Checked.includes((fRowBoxes[0],fRowBoxes[1],fRowBoxes[2])) ;
if(fRowBoxes.every(fRowWin) === true){
msg.innerHTML =`<h1> ${player1} Wins! </h1>`;
}
.textContent
if((fRowBoxes[0] && fRowBoxes[1] && fRowBoxes[2]).textContent == " x "){
msg.innerHTML =`<h1> ${player1} Wins! </h1>`;
}
and the .includes method
function checkScore(){
if (X_Checked.includes(fRowBoxes[0] && fRowBoxes[1] && fRowBoxes[2])){/*Only checks for fRowBoxes[2]?*/
msg.innerHTML =`<h1> ${player1} Wins! </h1>`;
}
}
Still nothing seems to work or it leads to the same result, any advice or suggestions would be highly appreciated.
let player1 = `<div class="symbol x"> x </div>`;
let player2 = `<div class="symbol o"> o </div>`;
let turn = player1;
let gridBoxes = document.querySelector('.grid').children;
let boxes = [];/*Stores all boxes in 3x3 grid*/
for(let i = 0; i < gridBoxes.length; i++){
boxes.push(gridBoxes[i]);
}
const msg = document.querySelector('div.msg ');
let fRowBoxes = [boxes[0],boxes[1],boxes[2]];/*Array with first row boxes*/
let sRowBoxes = [boxes[3],boxes[4],boxes[5]];
let tRowBoxes = [boxes[6],boxes[7],boxes[8]];
let fColBoxes = [boxes[0],boxes[3],boxes[6]];
let sColBoxes = [boxes[1],boxes[4],boxes[7]];
let tColBoxes = [boxes[2],boxes[5],boxes[8]];
let dBoxes1 =[boxes[0],boxes[4],boxes[8]];
let dBoxes2 = [boxes[2],boxes[4],boxes[6]];
let X_Checked = [];/*Stores boxes clicked by player 1*/
let O_Checked = [];
msg.display ='block';
function checkScore(){
if (X_Checked.includes(fRowBoxes[0] && fRowBoxes[1] && fRowBoxes[2])){/*Only checks for fRowBoxes[2]?*/
msg.innerHTML =`<h1> ${player1} Wins! </h1>`;
}
}
const tictactoe = (function(){/*START*/
msg.innerHTML = `<h1>Player 1 (X)</h1>`;
for(let i = 0; i<boxes.length; i++){
boxes[i].addEventListener('click',() =>{
if(boxes[i].value){
boxes[i].click(false);
}
else if(boxes[i].textContent === ""){
boxes[i].innerHTML = turn;
checkPlayer();
/**------------------------------------------- */
if (turn === player1){
O_Checked.push(boxes[i]);
console.log(O_Checked);
checkScore();/*Checks for a winner*/
}
else if (turn === player2){
X_Checked.push(boxes[i]);
console.log( X_Checked);
checkScore();
}
}
});}
}());/*END*/
let checkPlayer = (function(){
if(turn === player1){
turn = player2;
msg.innerHTML = `<h1>Player 2 (O)</h1>`;
}
else if(turn === player2){
turn = player1;
msg.innerHTML = `<h1>Player 1 (X)</h1>`;
}
});
let player1 = `<div class="symbol x"> x </div>`;
let player2 = `<div class="symbol o"> o </div>`;
let turn = player1;
let gridBoxes = document.querySelector('.grid').children;
let boxes = [];
for(let i = 0; i < gridBoxes.length; i++){
boxes.push(gridBoxes[i]);
}
const msg = document.querySelector('div.msg ');
let fRowBoxes = [boxes[0],boxes[1],boxes[2]];
let sRowBoxes = [boxes[3],boxes[4],boxes[5]];
let tRowBoxes = [boxes[6],boxes[7],boxes[8]];
let fColBoxes = [boxes[0],boxes[3],boxes[6]];
let sColBoxes = [boxes[1],boxes[4],boxes[7]];
let tColBoxes = [boxes[2],boxes[5],boxes[8]];
let dBoxes1 =[boxes[0],boxes[4],boxes[8]];
let dBoxes2 = [boxes[2],boxes[4],boxes[6]];
let X_Checked = [];
let O_Checked = [];
msg.display ='block';
function checkScore(){
if (X_Checked.includes(fRowBoxes[0] && fRowBoxes[1] && fRowBoxes[2])){
msg.innerHTML =`<h1> ${player1} Wins! </h1>`;
}
}
const tictactoe = (function(){/*START*/
msg.innerHTML = `<h1>Player 1 (X)</h1>`;
for(let i = 0; i<boxes.length; i++){
boxes[i].addEventListener('click',() =>{
if(boxes[i].value){
boxes[i].click(false);
}
else if(boxes[i].textContent === ""){
boxes[i].innerHTML = turn;
checkPlayer();
/**------------------------------------------- */
if (turn === player1){
O_Checked.push(boxes[i]);
console.log(O_Checked);
checkScore();
}
else if (turn === player2){
X_Checked.push(boxes[i]);
console.log( X_Checked);
checkScore();
}
}
});}
}());/*END*/
let checkPlayer = (function(){
if(turn === player1){
turn = player2;
msg.innerHTML = `<h1>Player 2 (O)</h1>`;
}
else if(turn === player2){
turn = player1;
msg.innerHTML = `<h1>Player 1 (X)</h1>`;
}
});
*{box-sizing:border-box;}
body{
margin:0;
padding:0;
font-family:arial;
}
.container{
display:flex;
height:100vh;
width:100%;
position:relative;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: tomato;
/* background-image:linear-gradient(to right, tomato, black, rgb(225, 225, 225)); */
}
.box:hover{
background-color:rgb(230,230,230);
transition: .4s ease-in-out;
}
.box,.grid{
cursor:pointer;
}
.box{
display:flex;
flex-direction:column;
justify-content: center;
align-items:center;
background-color:black;
}
.symbol{
font-size:4em;
font-style:bold;
font-family:arial;
text-transform:uppercase;
text-shadow:0px 0px 5px rgb(100,100,100);
}
.x{
color:tomato;
}
.o{
color:white;
}
.grid{
display: grid;
width: 350px;
grid-gap:10px;
border-radius:10px;
border:solid 10px white;
background-color:white;
grid-template-rows: repeat(3,100px);
grid-template-columns: repeat(3,1fr);
box-shadow: 0px 1px 8px rgb(50, 50, 50);
}
/* .grid:nth-child(even) */
.msg{
color:white;
position:absolute;
text-shadow: 0px 1px 3px rgb(50, 50, 50);
top:15px;
font-size:2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv ="author" content="Carl Dawkins">
<meta name ="description" content="A Tic Tac Toe Game">
<link type="text/css" href="../css/style.css" rel="stylesheet">
<title>TicTacToe</title>
</head>
<body>
<div class="container">
<div class="msg"> </div>
<div class="grid">
<div id="box-1" class="box" ></div>
<div id="box-2" class="box" ></div>
<div id="box-3" class="box" ></div>
<div id="box-4" class="box" ></div>
<div id="box-5" class="box" ></div>
<div id="box-6" class="box" ></div>
<div id="box-7" class="box" ></div>
<div id="box-8" class="box" ></div>
<div id="box-9" class="box" ></div>
</div>
</div>
<script src="../js/script.js"></script>
</body>
</html>

You are storing elements to array and try to compare elements.
I think comparing value (o or x) or id (box-1 ...) is better
X_Checked.every(e => e.innerText.trim() == 'x')

How can I make the image show as result

I've been working on a rock paper scissors game & I want the image to show as a result when the user makes a selection. For example, if i choose paper and the computer chooses rock, i want the rock image to display along with the 'lose' statement
I tried putting the images outside the folder to see if that worked but it didn't.
HTML
<div class="main-container">
<div class="score">
<p>You:0</p>
<p>Computer:0</p>
</div>
<div class="user-choices">
<img id='rock'class='choice' src="rock.png">
<img id='paper'class='choice' src="paper.png">
<img id='scissors'class='choice' src="scissors.png">
</div>
<div class='result'>
<div class="cpu-result"></div>
</div>
</div>
CSS
<style>
.result img {
height: 10rem;
}
.result{
text-align: center;
display: none;
}
</style>
Javascript
<script>
function cpuChoice() {
const rand = Math.random()
if (rand > .34) {
return 'paper'
} else if (rand <= .67) {
return 'rock'
} else {
return 'scissors'
}
}
function showWinner(winner,computerPick) {
if (winner === 'player') {
scoreboard.player++;
cpuResult.innerHTML = `<h2>Win!</h2>
<img class='cpu-result' src='${computerPick}.png>' `
} else if (winner === 'computer') {
scoreboard.computer++;
cpuResult.innerHTML = `<h2>Lose!</h2>
<img class='cpu-result' src='${computerPick}.png>'`
} else {
cpuResult.innerHTML = `<h2>Draw!</h2>
<img class'cpu-result' src='${computerPick}.png>' `
}
score.innerHTML = `
<p>Player:${scoreboard.player}</p>
<p>Computer: ${scoreboard.computer}</p>
`
result.style.display ='block'/
}
choices.forEach(choices => choices.addEventListener('click', play))
</script>
I want the image to display along with the win lose or draw message.

We Keep Coding

JavaScript is the programming language of the Web.

Proper way of selecting created element? - javascript

Related

My function (using an event listener) doesn't seem to give the expected output. How can I fix it?

Button array is empty after I copied from another array that has the whole set of HTMLCollection

Function that assigns new value appears to initially work the first time, but doesn't appear to return to beginning of if statement the second time

Javascript: How to check the winning state of all boxes/cells in a Tic Tac Toe game?

How can I make the image show as result

Categories

Resources