Front-End Development Libraries Projects - Build a 25 + 5 Clock

Curriculum Help
1

Tell us what’s happening:

I am trying to add an addEventListener to my elements but nothing happens when I click it. Any help would be appreciated.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:154.0) Gecko/20100101 Firefox/154.0

Challenge Information:

Front-End Development Libraries Projects - Build a 25 + 5 Clock

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/front-end-development-libraries-projects/bd7158d8c442eddfaeb5bd0f.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

specifically trying to add it to my i elements

3

Hi @amanimashaun,

Adding role=“button” to your i element doesn’t make the i element behave like a button since that’s done for screen readers. Instead try wrapping your i element with a button element and give the button element the id used for the listener.

Happy coding

4

Thanks wrapping them in a button worked! I am curious if it is possible to add an addEventListener to an i element directly though. :+1:

5

Adding a direct listener seems to work for an icon that is copied/pasted in, but not with a “fontawesome” icon…at least I couldn’t get it to work with that. That’s why I suggested wrapping your icon in a button element.

Here’s my test code if you want to try it out:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon Test</title>
    <script src="https://kit.fontawesome.com/2d0c756a4a.js" crossorigin="anonymous"></script>
</head>
<body>
    <i id="myIcon">★</i>
    <i id="session-decrease" class="fa-solid fa-minus"></i>

    <script>
        function handleClick() {
           alert("The icon was clicked!");
        }
        const icon = document.getElementById("myIcon");
        icon.addEventListener("click", handleClick);
        const sessionDecrease = document.getElementById("session-decrease");
        sessionDecrease.addEventListener("click", handleClick);
    </script>
</body>
</html>