Javascript in a Wordpress site doesn't work

Geobop

Geobop

I added a Javascript function to a WordPress site, but I couldn't get it to work. Then I checked it in Safari and discovered that it is working. So why doesn't it work in Opera?

This is my Javascript code:

document.addEventListener("DOMContentLoaded", function() {
    console.log("DOM fully loaded and parsed");

    const tableRows = document.querySelectorAll('.table--symlist2 tbody tr');
    console.log("Table rows:", tableRows);

    let currentCountryClass = "";
    let isOdd = true;

    tableRows.forEach((row) => {
        // Get the country class (assumes it's the first class in the classList)
        let rowCountryClass = Array.from(row.classList).find(cls => cls.startsWith('w-'));
        console.log("Current row country class:", rowCountryClass);

        if (rowCountryClass !== currentCountryClass) {
            // New country group
            currentCountryClass = rowCountryClass;
            isOdd = !isOdd; // Flip the isOdd flag for the new group
        }

        // Apply the appropriate class
        if (isOdd) {
            row.classList.add('odd');
            console.log("Added 'odd' class to row:", row);
        } else {
            row.classList.add('even');
            console.log("Added 'even' class to row:", row);
        }
    });
});

And this is the code I inserted in my functions.php file to include it:

function my_custom_scripts() {
    wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

It looks like Javascript is enabled by default on Opera. In addition, I added this specific site for good measure, but it still doesn't work.

leocg

leocg Moderator Volunteer @Geobop

@geobop Does it work in other Chromium based browsers?

Geobop

Geobop @leocg

@leocg I don't know what Chromium-based means. However, I tried it in Firefox and Google Chrome just now, and it works in both of them.

I recently bought a new laptop and hadn't got around to installing any browsers yet. Opera is my default browser, and I have a Mac, so it naturally has Safari.

jenster99

jenster99 @Geobop

@geobop Are you on the latest opera, and are you using any add-ons?

leocg

leocg Moderator Volunteer @Geobop

@geobop OK, Chrome is a browser based on Chromium.

burnout426

burnout426 Volunteer

Link to the page and description of what exactly is supposed to work but doesn't?

Geobop

Geobop @burnout426

@burnout426 https://symbols.geobop.com/resources/national-symbols/north-america-symbols/usa-symbols/usa-flowers/

I started out with a simple CSS style that gives even-numbered rows a gray background. However, there are some states that are represented by two or three rows. I wanted to make every row representing a particular state the same color.

So, the Javascript groups pages with the same class (e.g. w-al for Alabama) together, counting them as a single row. I inserted these classes in Alabama through Delaware, which look fine in Safari.

The rest of the rows still have the original class="tr--even." They look fine in Opera but are all gray in Safari.

Thank you.

burnout426

burnout426 Volunteer @Geobop

@geobop I'm only able to test on Windows 11 and not macOS, but for what it's worth, the page looks the same in Chrome, Firefox and Opera. The groups alternate between gray and white just as you described in Opera just like they do in other browers.

Maybe it's a macOS-only issue with Opera or it's something messed up with your Opera. How does the page look to you in a private window in Opera?

Geobop

Geobop @burnout426

@burnout426 I just opened a private window, and it looks the same to me - The rows Alabama through Delaware are all white.

I'll have to wait until someone with Opera on a Mac can check it out. If it's just a problem on my laptop, then I can continue using the Javascript, though I'll have to test it in Safari.

I've been getting lots of great scripts from ChatGPT, but half of them don't work because of weird bugs (firewalls, services not enabled, or whatever) in WordPress or my host (SiteGround). Then there are the caching problems, which are another pain.

Thanks for the input.