Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by behar
behar
10,799 Points

Question about eventlisteners

Im playing around with the addEventListener function (trying to build a Tic Tac Toe game). When you press anything with the class "board" i want it place an X inside every element with a class of board. However this code dosent work, and im not sure how to use the addEventListener correctly, if someone could provide me with some updated code, and perhaps an explanation id really appreciate it!

let BoxClicked = document.querySellectorAll(".board");
BoxClicked.addEventListener("click", function test() {document.innerHTML = "x"})

<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <table>
        <tr>
            <td class="board" id="0"></td>
            <td class="board" id="1"></td>
            <td class="board" id="2"></td>
        </tr>
        <tr>
            <td class="board" id="3"></td>
            <td class="board" id="4"></td>
            <td class="board" id="5"></td>
        </tr>
        <tr>
            <td class="board" id="6"></td>
            <td class="board" id="7"></td>
            <td class="board" id="8"></td>
        </tr>
    </table>
    <script src = "JavaScript.js"></script>
</body>
</html>

2 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Hi,

You're on the right track, there were just a few modifications I made which I'll link below a codepen so you can see the full code, and see it working. There still is a lot more logic you'll need to right to build a tic tac toe game, but I wanted to help get you over this particular hurdle.

First querySellectorAll has a spelling error. There is an extra lowercase l in Selector. However, this isn't the method you want, as this gives you an array of items, which doesn't work with tying an event listener to an array of objects. Instead, we want to just the get board itself, so I added a table id to the table, and used let BoxClicked = document.getElementById("table"); to get the table.

Then, we can re-write your even selector as the following.

//BoxClicked is the table, and on the table, we are attaching a click event listener, which calls an anonymous function, passing into that function the click event.
BoxClicked.addEventListener("click",function(event) {
  //Inside the function, we can use the target to get which cell was clicked, and add to that cell an "X"
  event.target.innerHTML = "x"
});

Check it the example here: https://codepen.io/kevink/pen/XZZydb

Good luck as you continue on.

behar
behar
10,799 Points
behar
behar
10,799 Points

Thank you very much!