Home › Forums › JavaScript › Help w/ Running Multiple Javascripts
- This topic is empty.
-
AuthorPosts
-
October 20, 2019 at 8:54 am #297541franchesskuhParticipant
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!
October 20, 2019 at 10:07 am #297543BeverleyhParticipantYou can share it via CodePen, JSBin, JSFiddle or similar. Folks are unlikely to download unknown files from Dropbox.
October 20, 2019 at 6:12 pm #297549franchesskuhParticipantOkay, 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!)
October 20, 2019 at 10:07 pm #297551BeverleyhParticipantWe 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.
October 26, 2019 at 7:16 pm #297939franchesskuhParticipantHey! 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"; } }); }
October 27, 2019 at 12:28 am #297940BeverleyhParticipantDOMContentLoaded 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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.