JavaScript element.style.setProperty() not working

Question

I'm creating a website with a navbar and some JavaScript that sets the position and the background gradient of a div (class: bubble) that highlights a navbar item based on the position that the user scrolls to. Here's every single tiny bit of my code:

const sections = document.querySelectorAll('selection');
const bubble = document.querySelector('.bubble');
const gradient = 'linear-gradient(to right top, #000428, #004e92)';

const options = {
    threshold: 0.7
}

let observer = new IntersectionObserver(navCheck, options);

function navCheck(entries) {
    entries.forEach(entry => {
        const className = entry.target.className;
        const activeAnchor = document.querySelector(`[data-page=${className}]`);
        const gradientIndex = entry.target.getAttribute(`data-index`)
        const coords = activeAnchor.getBoundingClientRect();
        const directions = {
            height: coords.height,
            width: coords.width,
            top: coords.top,
            left: coords.left
        };
        if (entry.isIntersecting) {
            bubble.style.setProperty('left', `${directions.left}px`)
            bubble.style.setProperty('top', `${directions.top}px`)
            bubble.style.setProperty('width', `${directions.width}px`)
            bubble.style.setProperty('height', `${directions.height}px`)
        }
    });
}

sections.forEach(section => {
    observer.observe(section);
});

Now, I'm super new to JavaScript and can't find out why this isn't doing anything. Could anyone help me?

Answer 1

I also playing around with JavaScript and started with this YouTube-Tutorial.

Seems to be the same code.

I changed:

1. const activeAnchor = document.querySelector("[data-page="+ CSS.escape(className) + "]");

2. if (entry.isIntersecting){ bubble.style.setProperty('left', directions.left.toString() + 'px'); bubble.style.setProperty('top', directions.top.toString() + 'px'); bubble.style.setProperty('width', directions.width.toString() + 'px'); bubble.style.setProperty('height', directions.height.toString() + 'px'); console.log(bubble.style); }

And it works, but do not ask my why.

here my full JavaScript file:

const section = document.querySelectorAll('section');
const bubble = document.querySelector('.bubble');
const gradients = [
    "linear-gradient(to right top, #56ab2f, #a8e063)",
    "linear-gradient(to right top,  #cb2d3e, #ef473a)",
    "linear-gradient(to right top,  #5A3F37, #2c7744)",
];

const options = {
    threshold: 0.7
}

let observer = new IntersectionObserver(navCheck, options);

function navCheck(entries) {
    entries.forEach(entry => {
        const className = entry.target.className;


       const activeAnchor = document.querySelector("[data-page="+ CSS.escape(className) + "]");


        const gradientIndex = entry.target.getAttribute("data-index");
        const coords = activeAnchor.getBoundingClientRect();

        const directions = {
            height: coords.height,
            width: coords.width,
            top: coords.top,
            left: coords.left
        };

        if (entry.isIntersecting){
            bubble.style.setProperty('left', directions.left.toString() + 'px');
            bubble.style.setProperty('top', directions.top.toString() + 'px');
            bubble.style.setProperty('width', directions.width.toString() + 'px');
            bubble.style.setProperty('height', directions.height.toString() + 'px');
            console.log(bubble.style);
        }
    });
}

section.forEach(section => {
    observer.observe(section);
});