Guys, the weirdest thing is going on, and I want to know if y’all can help:
I’m trying to code the “Rock”, “Paper”, and “Scissors” button to print their name into the box under them. Although I used the same method throughout, the buttons won’t work. The only one that works is the “Rock” button. I’m using Brackets just in case ur wondering. Plz help! Here’s my code
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<meta charset="UTF-8">
<title> Tac </title>
</head>
<!-- R.P.S. container -->
<div id="container">
<!-- Title -->
<p id="title"> Rock, Paper, Scissors!</p>
<!-- R.P.S. selectors -->
<table id="userSelector">
<th id="userHead" colspan="3" style="background-color: black"> Select Your Pose </th>
<tbody>
<tr>
<td><button id="rock"> Rock </button></td>
<td><button id="paper"> Paper </button></td>
<td><button id="scissors"> Scissors </button></td>
</tr>
<tr>
<td colspan="3" id='currentChoice'> --- </td>
</tr>
</tbody>
</table>
<table id="aiSelector">
<th id="aiHead" colspan="3" style="background-color: black"> A.I.'s Pose </th>
<tr>
<td id="aiRock"> Rock </td>
<td id="aiPaper"> Paper </td>
<td id="aiScissors"> Scissors </td>
</tr>
<tr>
<td colspan="3" id="aiChoice"></td>
</tr>
</table>
<!-- Buttons -->
<button type="button" id="rpsStarter">
Click to lock your choice and start the battle!
</button>
<table id="scoreboard">
<th colspan="4" id="scoreboardTitle"> Scoreboard </th>
<tr>
<td id="userWinsTitle"> Your Wins </td>
<td id="tiesTitle"> Ties </td>
<td id="aiWinsTitle"> AI Wins </td>
<td id="totalGamesTitle"> Total Games</td>
</tr>
<tr>
<td id="userWins"> 0 </td>
<td id="ties"> 0 </td>
<td id="aiWins"> 0 </td>
<td id="totalGames"> 0 </td>
</tr>
</table>
</div>
<script src='script.js'>
</script>
<body>
</body>
</html>
JS:
rock.addEventListener("click", function () {
document.getElementById('currentChoice').innerHTML ="Rock"
})
paper.addEventListener("click", function () {
document.getElementById('currentChoice').innerHTML ="Paper"
})
scissors.addEventListener("click", function () {
document.getElementById('currentChoice').innerHTML ="Scissors"
})
JS can manipulate html, yes, but adding an event listener requires you to tell which html element JS should add the event listener to, this can for example be done with getElementById()
It is possible to cache this element node so we don’t need to keep querying it. Once cached we can query the properties.
// at top of code
const currentChoice = document.querySelector('#currentChoice');
Now the handlers…
currentChoice.textContent = this.textContent;
The above line is more dynamic, and will be needed when we create a single event listener and delegate the handler that applies. This was discussed a short while ago in the Corner Bar in a topic by @aquaphoenix17. Dig around or search for ‘delegation’ and it should come up.
const currentChoice = document.querySelector('#currentChoice');
const rock = document.querySelector('#rock');
const paper = document.querySelector('#paper');
const scissors = document.querySelector('#scissors');
rock.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
paper.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
scissors.addEventListener("click", function () {
currentChoice.textContent = this.textContent;
});
Notice there is only one event listener? The delegation is handled by getEventTarget.
Aside
If you use this code in your published work, be sure to include the attribution as given above, along with this site. Not only does it give credit where credit is due, it gives you a roadmap of the learning journey so you can backtrack six months down the road.
querySelector clearly selects a single element. You need to find a way, to figure out which button is clicked. Maybe you should search through stackoverflow for some inspirations?