• Login
    • Search
    • Categories
    • Recent
    • Tags
    • Users
    • Groups
    • Rules
    • Help

    Do more on the web, with a fast and secure browser!

    Download Opera browser with:

    • built-in ad blocker
    • battery saver
    • free VPN
    Download Opera

    Javascript in a Wordpress site doesn't work

    Opera for Mac
    4
    9
    1235
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Geobop
      Geobop last edited by leocg

      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.

      Reply Quote 0
        leocg 1 Reply Last reply
      • leocg
        leocg Moderator Volunteer @Geobop last edited by

        @geobop Does it work in other Chromium based browsers?

        Reply Quote 0
          Geobop 1 Reply Last reply
        • Geobop
          Geobop @leocg last edited by

          @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.

          Reply Quote 0
            jenster99 leocg 2 Replies Last reply
          • jenster99
            jenster99 @Geobop last edited by

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

            Reply Quote 0
              1 Reply Last reply
            • leocg
              leocg Moderator Volunteer @Geobop last edited by

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

              Reply Quote 0
                1 Reply Last reply
              • burnout426
                burnout426 Volunteer last edited by

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

                Reply Quote 0
                  Geobop 1 Reply Last reply
                • Geobop
                  Geobop @burnout426 last edited by

                  @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.

                  Reply Quote 1
                    burnout426 1 Reply Last reply
                  • burnout426
                    burnout426 Volunteer @Geobop last edited by

                    @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?

                    Reply Quote 0
                      Geobop 1 Reply Last reply
                    • Geobop
                      Geobop @burnout426 last edited by

                      @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.

                      Reply Quote 1
                        1 Reply Last reply
                      • First post
                        Last post

                      Computer browsers

                      • Opera for Windows
                      • Opera for Mac
                      • Opera for Linux
                      • Opera beta version
                      • Opera USB

                      Mobile browsers

                      • Opera for Android
                      • Opera Mini
                      • Opera Touch
                      • Opera for basic phones

                      • Add-ons
                      • Opera account
                      • Wallpapers
                      • Opera Ads

                      • Help & support
                      • Opera blogs
                      • Opera forums
                      • Dev.Opera

                      • Security
                      • Privacy
                      • Cookies Policy
                      • EULA
                      • Terms of Service

                      • About Opera
                      • Press info
                      • Jobs
                      • Investors
                      • Become a partner
                      • Contact us

                      Follow Opera

                      • Opera - Facebook
                      • Opera - Twitter
                      • Opera - YouTube
                      • Opera - LinkedIn
                      • Opera - Instagram

                      © Opera Software 1995-