Why does my JavaScript work in the browser console but does not work in my shortcode?

admin管理员组

文章数量:1123929

I am trying to create a shortcode the user can just insert which creates a button that loops through an array and displays it or hides it. On page load I want every item with an index >= 1 to have display: none; It works when I insert the code into the browser console but not in the shortcode. What am I doing wrong? This is the exact same code I have in the shortcode as well. The console.log("click") displays correctly though whenever I click the button.

EDIT: Fixed the issue by waiting for the DOM to load completely and then run the script.

document.addEventListener("DOMContentLoaded", function () {
        var getSiblings = function (elem) {

            // Setup siblings array and get the parent
            var siblings = [];
            var sibling = elem.parentNode.parentNode;

            // Loop through each sibling and push to the array
            while (sibling) {
                if (sibling.nodeType === 1) {
                    siblings.push(sibling);
                }
                sibling = sibling.nextSibling;
            }
            return siblings;
        };

        var elem = document.getElementById("read-more-btn");
        var siblings = getSiblings(elem);

        siblings.forEach(function(value, index) {
            if (index >= 1) {
                value.style.display ="none";
            }
        });

        readMore.addEventListener("click", function(){
            
            siblings.forEach(function(value, index) {
                if (index > 1) {
                    readMore.style.display = "none";
                    value.style.display = "block";
                }
                
            });
        });
    });

I am trying to create a shortcode the user can just insert which creates a button that loops through an array and displays it or hides it. On page load I want every item with an index >= 1 to have display: none; It works when I insert the code into the browser console but not in the shortcode. What am I doing wrong? This is the exact same code I have in the shortcode as well. The console.log("click") displays correctly though whenever I click the button.

EDIT: Fixed the issue by waiting for the DOM to load completely and then run the script.

document.addEventListener("DOMContentLoaded", function () {
        var getSiblings = function (elem) {

            // Setup siblings array and get the parent
            var siblings = [];
            var sibling = elem.parentNode.parentNode;

            // Loop through each sibling and push to the array
            while (sibling) {
                if (sibling.nodeType === 1) {
                    siblings.push(sibling);
                }
                sibling = sibling.nextSibling;
            }
            return siblings;
        };

        var elem = document.getElementById("read-more-btn");
        var siblings = getSiblings(elem);

        siblings.forEach(function(value, index) {
            if (index >= 1) {
                value.style.display ="none";
            }
        });

        readMore.addEventListener("click", function(){
            
            siblings.forEach(function(value, index) {
                if (index > 1) {
                    readMore.style.display = "none";
                    value.style.display = "block";
                }
                
            });
        });
    });

• shortcode
• javascript
• html

Share Improve this question edited Mar 21, 2024 at 14:17 rnkwill asked Mar 20, 2024 at 16:33 rnkwillrnkwill 111 bronze badge 5

• How are you adding it to the shortcode? Script tags at the bottom? – Howdy_McGee ♦ Commented Mar 20, 2024 at 16:43
• 1 Correct. I have the element and then the script tag as the last item. – rnkwill Commented Mar 20, 2024 at 17:02
• Can you post your shortcode code? If this JS works, then it likely won't be the issue. If you put this into a js file and enqueue it properly using your sc hook, it should work, or at least get you to a point where you can debug. I don't understand how it is all being linked. – Adam Commented Mar 20, 2024 at 21:02
• I figured it out yesterday! Thanks for trying to help. – rnkwill Commented Mar 21, 2024 at 14:19
• You shouldn't do this - WP has a specific method for enqueuing scripts and it's best practice to use that method. – Tony Djukic Commented Mar 26, 2024 at 1:38

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Solved by wrapping everything in document.addEventListener("DOMContentLoaded", function() {}

Realized it was trying to fire the script off

document.addEventListener("DOMContentLoaded", function () {
        var getSiblings = function (elem) {

            // Setup siblings array and get the parent
            var siblings = [];
            var sibling = elem.parentNode.parentNode;

            // Loop through each sibling and push to the array
            while (sibling) {
                if (sibling.nodeType === 1) {
                    siblings.push(sibling);
                }
                sibling = sibling.nextSibling;
            }
            return siblings;
        };

        var elem = document.getElementById("read-more-btn");
        var siblings = getSiblings(elem);

        siblings.forEach(function(value, index) {
            if (index >= 1) {
                value.style.display ="none";
            }
        });

        readMore.addEventListener("click", function(){
            console.log("click works");
            siblings.forEach(function(value, index) {
                if (index > 1) {
                    readMore.style.display = "none";
                    value.style.display = "block";
                }
                
            });
        });
    });

本文标签： Why does my JavaScript work in the browser console but does not work in my shortcode