javascriptcsswordpressgenesis

Setting CSS property - filter: blur(x) with JS for site-inner class within genesis framework; Cannot read property 'getAttribute' of null


I'm trying to achieve blur effect with JS on "site-inner" class after the event of expanding the mobile dropdown menu in genesis sample theme by clicking the mobile menu button.

The button has aria-expanded attribute and I decided to use it as a trigger.

The HTML element that is being created by responsive-menus.js within Genesis Framework:

<button class="menu-toggle dashicons-before dashicons-menu activated" aria-expanded="true" aria-pressed="true" id="genesis-mobile-nav-primary"></button>

Below is the code I'm using:

window.onload = blurFunction();

function blurFunction() {
    var x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded"); 
    if (x == "true") 
    {
    document.getElementById("site-inner").style.webkitFilter = "blur(8px)";  
    }
}

Console returns the following:

Uncaught TypeError: 
Cannot read property 'getAttribute' of null.

Uncaught TypeError: 
Cannot set property 'webkitFilter' of undefined

EDIT:

After removing the brackets function actually executes - but - I've added an else statement ant thats the only part that actually works. The function runs, checks the aria-expanded attribute and adds the else condition to the site-inner element to which I've added an id="st-pusher".

Here's the code:

window.onload = blurFunction;

function blurFunction() {
    let x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded");

    if (x == 'true') {
    document.getElementById("st-pusher").style.webkitFilter = "blur(8px)";  
    } else {
    document.getElementById("st-pusher").style.webkitFilter = "blur(0px)";  
    };
}

Solution

  • Turned out that beside the brackets used for the function the main problem was the event handler that I used. Everything works fine now after i changed it to .onclick event since the element triggering the function is a mobile-menu button. Thanks everyone for helping along :)

    window.onclick = blurFunction;
    
        function blurFunction() {
            var x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded");
    
            if (x == "true") {
            document.getElementById("st-pusher").style.webkitFilter = "blur(8px)";  
            } else {
            document.getElementById("st-pusher").style.webkitFilter = "blur(0px)";  
            };
        }