Help w/ Running Multiple Javascripts

[franchesskuh]

Hey, I am a total noob at coding but I have to do this assignment for uni and I’m just really struggling with getting my image gallery slider and collapsible content to work as the former doesn’t appear upon the initial loading of the website and the latter which doesn’t work at all? Any help would be much appreciated as this unit I’m doing this assignment for is a core class so I don’t want to fail and have to retake the class.

I also don’t know how to share my work other than with a dropbox link, so here: https://www.dropbox.com/sh/nes15c3sv8mp9xw/AADuwY3banvsPs83IDxwvQpPa?dl=0

Also, please ignore how unfinished this assignment is… I’m clearly struggling hard haha.

Thanks in advance!

[Beverleyh]

You can share it via CodePen, JSBin, JSFiddle or similar. Folks are unlikely to download unknown files from Dropbox.

[franchesskuh]

Okay, I’ve tried JSBin so hopefully this works? Also, since the images obviously aren’t coming up, prioritising fixing the collapsible content sections would be much appreciated if it’s difficult to understand the image gallery slider without the images attached. Thanks again! Please let me know if the link isn’t working too :)

https://jsbin.com/vojopacate/edit?html,css

I also sourced the collapsible content from here: https://www.w3schools.com/howto/howto_js_collapsible.asp (if that helps at all!)

[Beverleyh]

We only really need to to see a reduced test case but it doesn’t look like your JavaScript is in the right place for this script. Above the closing body is expected, and what the slider tutorial indicates. In this case, the DOM (and elements referenced by the script) need to exist before the JS is ‘read’ by the browser, so that it can interpret them in context. If you need to put the script first, try putting it inside an event listener such as DOMContentLoaded.

[franchesskuh]

Hey! I’ve researched this a bit more but still can’t seem to make it work as I can’t find a clear tutorial on how to do it properly. I’ve attempted the DomContentLoaded event listener but my collapsible content still won’t work. Sorry, I’m a complete wreck when it comes to coding ahah

Would you be able to help me figure out how to write it specifically? Because this is what I’ve done, and I think there’s something still missing. Thanks in advance!

            var coll = document.getElementsByClassName("collapsible");
            var i;

            for (i = 0; i < coll.length; i++) {
            coll[i].addEventListener ("DOMContentLoaded", ready) ("click", function() {
                this.classList.toggle("active");
                var content = this.nextElementSibling;
                if (content.style.maxHeight){
                content.style.maxHeight = null;
                } else {
                content.style.maxHeight = content.scrollHeight + "px";
                } 
            });
            }

[Beverleyh]

DOMContentLoaded aside for now, and going back to my previous post, have you tried putting the script above the closing body element? So that the markup comes first (as per the tutorial). It worked when I tried it the other day.

document.addEventListener('DOMContentLoaded', function () {
/* your script here */
});

You can use your developer console (F12) to check for JS errors then hit up Google to find then and learn more about event listeners.

[Author]

Posts