Codepen code doesn't work on my local files -- code provided

Question

I recently got help on the following question in which a codepen was provided: https://codepen.io/diego-fortes/pen/GRvRPzX

Can anyone get this code to run on a local computer as it does in the codepen? If so, can you provide that code? (I believe the jquery 3.6.0 file which is included in the same folder may not be linking properly --> my bar hover is stuck on bar 1 and only cursor changes when I hover over the other bars)

Any help would be super useful! Thanks

Here's the HTML, CSS, and JS that I used on my local computer: JS:

<head>
    <script src="jquery-3.6.0.min.js"></script>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">

    <script type="text/javascript">
            const $navbars = document.querySelectorAll(`.navbar-item`);

            function removeSelected() {
                const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);

                if (!$selected) {
                    return;
                }

                for (let each of $selected) {
                    each.classList.remove("navbar-item--selected");
                    each.classList.remove("slider-item--visible");
                }

            }

            for (let each of $navbars) {
                each.addEventListener("mouseover", function () {

                    removeSelected();

                    const position = each.getAttribute("data-position");
                    const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)

                    each.classList.add("navbar-item--selected")
                    $item.classList.add("slider-item--visible");
                });
            }
    </script>

</head>

HTML:

 <body>

    <div class="wrapper">
        <div class="slider">
            <div class="slider-item slider-item--visible">
                hello item 1
            </div>
            <div class="slider-item">
                hello item 2
            </div>
            <div class="slider-item">
                hello item 3
            </div>
        </div>
        <nav class="navbar">
            <span class="navbar-item navbar-item--selected" data-position="1"></span>
            <span class="navbar-item" data-position="2"></span>
            <span class="navbar-item" data-position="3"></span>
        </nav>
    </div>

</body>

CSS:

.wrapper {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

/* Slider */
.slider {
    max-width: 100%;
    width: 100%;
}

.slider-item {
    display: none;
}

.slider-item--visible {
    display: block;
}

/* Navbar */
.navbar {
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    height: 8px;
}

.navbar-item {
    max-width: 33.3%;
    width: 100%;
    display: block;
    height: 5px;
    cursor: pointer;
    opacity: .5;
    transition: all .2s;
}

.navbar-item--selected {
    height:10px;
    opacity: 1;
}

/* Meaningless styles (colors) */
.navbar-item:nth-child(1){
    background: salmon;
}

.navbar-item:nth-child(2) {
    background: lightblue;
}

.navbar-item:nth-child(3){
    background: #19be29;
}

Its working on my localhost for me. Also your CSS code block is cut off at the top, the top CSS doesn't have a class defined. — SecretTimes, Oct 12 '21 at 14:22
what doesn't work? editing your question to include a code snippet works. — depperm, Oct 12 '21 at 14:22
Having the wrong jquery.js path won't make any difference... as you're *not using jquery* (that I could spot on a cursory glance) — freedomn-m, Oct 12 '21 at 14:23
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Oct 12 '21 at 14:31
It's been solved guys, thanks for all of your comments :)) As Sato said, it was in the wrong order and the HTML wasn't loading yet when the js was called. — dt123, Oct 12 '21 at 14:46

score 1 · Accepted Answer · answered Oct 12 '21 at 14:27

Your code doesn't work because your Javascript is above HTML.
In your case, document.querySelector cannot select anything.

Please move the JavaScript code to bottom of HTML.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            display:  block;
        }
        
        /* Slider */
        .slider{
            max-width: 100%;
            width: 100%;
        }
        
        .slider-item{
            display: none;
        }
        .slider-item--visible{
            display: block;
        }
        
        /* Navbar */
        .navbar{
            max-width: 100%;
            display: flex;
            align-items: flex-end;
            height: 8px;
        }
        .navbar-item{
            max-width: 33.3%;
            width: 100%;
            display: block;
            height: 5px;
            cursor: pointer;
            opacity: .5;
            transition: all .2s; 
        }
        
        .navbar-item--selected{
            height: 8px;
            opacity: 1;
        }
        
        /* Meaningless styles (colors) */ 
        .navbar-item:nth-child(1){
            background: salmon;
        }
        
        .navbar-item:nth-child(2){
            background: lightblue;
        }
        
        .navbar-item:nth-child(3){
            background: #19be29;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="slider">
        <div class="slider-item slider-item--visible">
            hello item 1
        </div>
        <div class="slider-item">
            hello item 2
        </div>
        <div class="slider-item">
            hello item 3
        </div>
    </div>
    <nav class="navbar">
        <span class="navbar-item navbar-item--selected" data-position="1"></span>
        <span class="navbar-item" data-position="2"></span>
        <span class="navbar-item" data-position="3"></span>
    </nav>
    </div>
    <script>
        const $navbars = document.querySelectorAll(`.navbar-item`);


function removeSelected(){
    const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
    
    if (!$selected){
        return;
    }
    
    for (let each of $selected){
        each.classList.remove("navbar-item--selected");
        each.classList.remove("slider-item--visible");
    }
    
}

for (let each of $navbars){
    each.addEventListener("mouseover", function(){
        
        removeSelected();
        
        const position = each.getAttribute("data-position");
        const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
        
        each.classList.add("navbar-item--selected")
        $item.classList.add("slider-item--visible");
    });
}
    </script>
</body>

</html>

Thank you so much for this !! I did try switching orders but I guess I didn't try the right order. :D — dt123, Oct 12 '21 at 14:45

Codepen code doesn't work on my local files -- code provided

1 Answers1