Why aren't my buttons working?

#1

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"
})

If u need my css, lemme know. Thnx, guys!

#2

here:

rock.addEventListener

where is rock defined?

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()

#3

This is what I changed:

document.getElementById(‘paper’).addEventListener(“click”, function () {
document.getElementById(‘currentChoice’).innerHTML =“Paper”
})

just to test it out. It still won’t work. Thnx, btw, but a little more help?

#4

And rock is still the only working button.

#5

Needs to be wrapped in a <tr></tr>.

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;
});

https://repl.it/NOis

#6

I tracked down the topic,

[JavaScript] Assistance Greatly Appreciated

This is the code that will replace the earlier version…

const currentChoice = document.querySelector('#currentChoice');

const buttons = document.querySelector('#userSelector td');

//https://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
const getEventTarget = e => {
  e = e || window.event;
  return e.target || e.srcElement;
};

const buttonHandler = e => {
  let target = getEventTarget(e);
  currentChoice.textContent = target.textContent;
};

buttons.addEventListener('click', buttonHandler);

https://repl.it/NOis/1

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.

#7

Thnx, bro! I’ll try it and tell u if this solves the problem.

#8

Here is an implementation that may give you some ideas…

https://repl.it/NOis/2

#9

Here’s what I did:

HTML:

Tac 
<div id="container">
    <!-- Title -->
    <p id="title"> Rock, Paper, Scissors!</p>
    <!-- R.P.S. selectors -->
    <table id="userSelector">
    <tr><th id="userHead" colspan="3" style="background-color: black"> Select Your Pose </th></tr>
        <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>

JS:

const currentChoice = document.querySelector('#currentChoice');

const buttons = document.querySelector('#userSelector td');

const getEventTarget = e => {
  e = e || window.event;
  return e.target || e.srcElement;
};

const buttonHandler = e => {
  let target = getEventTarget(e);
  currentChoice.textContent = target.textContent;
};

buttons.addEventListener('click', buttonHandler);

and the buttons are still insisting to only let rock work.

#10

but if you look at the value of buttons:

"<td><button id='rock'> Rock </button></td>"

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?