Event listener not listening

Language Help JavaScript
1

Hi everyone,

I’m working on my portfolio website project in the full stack engineer program. There are no specific designs to follow, but it must be interactive using JS.

I decided to create a skills slide show, which I’m now starting to regret, since I have been struggling to get it to work properly.

The arrows that should display the next or prior skill are unresponsive when clicked, despite two event handlers.

In the JS code below, the CheckArrows and skillDisplay functions work properly when I manually adjust the skill number. The issue is the leftClick and rightClick functions don’t execute at all, so the skillNumber variable and associated skill write-up never change.

The last item to note is the icons are from font awesome. It may be irrelevant, but it’s worth mentioning.

Any help is much appreciated!

-John

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Portfolio Website</title>
    <link rel="stylesheet" href="style.css" >
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/c65ff74c63.js" crossorigin="anonymous"></script>

</head>
<body>
    <header>
        <h1>John Smith</h1>
        <nav>
            <a href="./index.html">About Me</a>
            <a href="./projects.html">Projects</a>
            <a href="./skills.html">Skills</a>
            <a href="./contact">Contact</a>
        </nav>
    </header>
    
    <section>
        <h2>Skills</h2>
        <div id="skills_container">
            <i id="left_arrow" class="fa-solid fa-chevron-left fa-2xl "></i>
            <div id="skill_1" class="skills">
                <h3 class="subhead">HTML 5</h3>
                <p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
                    ultricies nec, pellentesque eu, pretium quis, sem. 
                </p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
                    ultricies nec, pellentesque eu, pretium quis, sem. 
                </p>
            </div>
            <div id="skill_2" class="skills">
                <h3 class="subhead">CSS</h3>
                <p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
                    ultricies nec, pellentesque eu, pretium quis, sem. 
                </p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
                    ultricies nec, pellentesque eu, pretium quis, sem. 
                </p>
            </div>
            <div id="skill_3" class="skills">
                <h3 class="subhead">JavaScript</h3>
                <p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
                    ultricies nec, pellentesque eu, pretium quis, sem. 
                </p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
                    ultricies nec, pellentesque eu, pretium quis, sem. 
                </p>
            </div>
            <div id="skill_4" class="skills">
                <h3 class="subhead">GitHub</h3>
                <p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
                    ultricies nec, pellentesque eu, pretium quis, sem. 
                </p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
                    ultricies nec, pellentesque eu, pretium quis, sem. 
                </p>
            </div>
            <div id="skill_5" class="skills">
                <h3 class="subhead">Figma</h3>
                <p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
                    ultricies nec, pellentesque eu, pretium quis, sem. 
                </p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
                    ultricies nec, pellentesque eu, pretium quis, sem. 
                </p>
            </div>
            <i id="right_arrow" class="fa-solid fa-chevron-right fa-2xl"></i>
    </div>
    </section>

    <script src="./script.js"></script>

</body>
</html>

JavaScript Code

const skills = document.getElementsByClassName('skills');
const leftArrow = document.getElementById('left_arrow');
const rightArrow = document.getElementById('right_arrow');

//Sets initial skill number
let skillNumber = 0;

// Removes arrows when additional skills are unavailable
function checkArrows () {
    if(skillNumber === 0) {
        leftArrow.style.display = 'none';
    } else {
        leftArrow.style.display = 'inline-block';
    }
    if(skillNumber === skills.length -1) {
        rightArrow.style.display = 'none';
    } else {
        rightArrow.style.display = 'inline-block';
    }
    }

// Sets click event handler on arrows    
leftArrow.addEventListener('click', leftClick);
rightArrow.addEventListener('click', rightClick); 

// Sets the appropriate skill to be displayed and hides the others
function skillDisplay () {
    for (let i=0; i < skills.length; i++) {
        if (i === skillNumber) {
        skills[i].style.display = 'inline-block';
    } else {
    skills[i].style.display = 'none';
}
}}

//Sets initial skills and arrow displays
skillDisplay ();
checkArrows ();

//Click event handlers for arrows
function leftClick () {
    skillNumber -= 1;
    checkArrows();
    skillDisplay();
}
function rightClick () {
    skillNumber += 1;
    checkArrows();
    skillDisplay();
    console.log("test"); //Fails to print "test" when clicked 
}
3

I think that this script element:

<script src="https://kit.fontawesome.com/c65ff74c63.js" crossorigin="anonymous"></script>

ran a script that switched the elements that had
class="fa-solid fa-chevron-left fa-2xl "
and
class="fa-solid fa-chevron-right fa-2xl"
with svg images
meaning that the leftArrow and rightArrow elements were no longer present.

You could deal with that by making the leftArrow element a parent of the element that gets replaced with the svg element.
You could change [the element that gets assigned to be leftArrow in the JavaScript from]

            <i id="left_arrow" class="fa-solid fa-chevron-left fa-2xl "></i>

to

            <span id="left_arrow">
                <i class="fa-solid fa-chevron-left fa-2xl ">[&lt;]</i>
            </span>

and similarly for rightArrow :

            <span id="right_arrow">
                <i class="fa-solid fa-chevron-right fa-2xl">[&gt;]</i>
            </span>
svg element that replaces the i element 
<svg class="svg-inline--fa fa-chevron-right fa-2xl" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg="">
  <path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path>
</svg>

(I didn’t know this stuff by just looking at the code … I ran the code, and checked the console, and checked the HTML being displayed by doing “Inspect”.)

2 Likes
5

If you don’t want the stuff on the page to move around as much,
consider changing the visibility instead of changing the display for the style of the element.

6

Thank you!

I suspected the font awesome icon was causing problems, but I couldn’t identify the exact issue. Your solution solves the problem.

-John

1 Like
7

I updated the JS code to use visibility instead of hidden, as show below.

// Removes arrows when additional skills are unavailable
function checkArrows () {
    if(skillNumber === 0) {
        leftArrow.style.visibility = 'hidden';
    } else {
        leftArrow.style.visibility = 'visible';
    }
    if(skillNumber === skills.length -1) {
        rightArrow.style.visibility = 'hidden';
    } else {
        rightArrow.style.visibility = 'visible';
    }
    }

// Sets the appropriate skill to be displayed and hides the others
function skillDisplay () {
    for (let i=0; i < skills.length; i++) {
        if (i === skillNumber) {
        skills[i].style.visibility = 'visible';
        
    } else {
    skills[i].style.visibility = 'collapse';
}
}}

The problem is each skill is shown vertically since the code maintains the layout for the other skills even though they are no longer visible.

I tried visibility: collapse on the skills to be hidden. It didn’t work as anticipated, with the visible skill still shown vertically rather than horizontally.

How do I fix this?

-John

8

I’d only use visibility for the arrows then, not for the skills divs.

1 Like
9

Thanks for the clarification. It works great now.

-John