0

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";
                }
                
            });
        });
    });
5
  • How are you adding it to the shortcode? Script tags at the bottom?
    – Howdy_McGee
    Mar 20 at 16:43
  • 1
    Correct. I have the element and then the script tag as the last item.
    – rnkwill
    Mar 20 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
    Mar 20 at 21:02
  • I figured it out yesterday! Thanks for trying to help.
    – rnkwill
    Mar 21 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. Mar 26 at 1:38

1 Answer 1

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";
                }
                
            });
        });
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.