Adding multiple JS into one page

Discussion in 'Scripts' started by duxieking, Jul 2, 2016.

0
  1. #1
    Hello!

    This might be a bit of a newb question, but I am new to JS.
    I have one JS for slideshow, and one for modal, but they simply don't work together. Only one of the scripts works.

    I am adding them using external link.
    Code:
    <script type="text/javascript" src="JS/Slideshow.js"></script>
<script type="text/javascript" src="JS/modal.js"></script>
    Code (markup):
    (they are both at the end of my html code before </body>)

    This is the JS for slideshow :

    Code:

    var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x.style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500);
}
    Code (markup):

    And here is my JS for modal:

    Code:
    var modal = document.getElementById('myModal');
var btn = document.getElementsByClassName("myBtn")[0];
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
    Code (markup):
    Maybe there is an issue in one of my scripts?
     
    Last edited by a moderator: Jul 2, 2016
    duxieking, Jul 2, 2016 IP
  2. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    819
    Best Answers:
    7
    Trophy Points:
    320
    #2
    The first thing I would do is to move your JS file URLs into the the page header just before </HEAD>. That way they are sure to be loaded by the time you need to call JS functions.
     
    mmerlinn, Jul 2, 2016 IP
  3. duxieking

    duxieking Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    I tried that, both of the scripts didn't work, they seem to only work then in <body></body>
     
    duxieking, Jul 2, 2016 IP
  4. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    819
    Best Answers:
    7
    Trophy Points:
    320
    #4
    Did you try reversing their load order?

    Regardless, they should work when in the header.

    It looks like we need to see how they are used. How about posting the code that calls them being sure to include any settings that affect them.
     
    mmerlinn, Jul 2, 2016 IP
  5. duxieking

    duxieking Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    I managed to put the script into head but I had to change <script type="text/javascript" src="JS/modal.js"></script> into <script type="text/javascript" async src="JS/modal.js"></script> but still only one script works, what can possibly be the issue ? :/
     
    duxieking, Jul 2, 2016 IP
  6. duxieking

    duxieking Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Aright guys! I fixed it, I look through all of my scripts and there was a little stupid problem in one of the CSS that was preventing the button from being clickable when images are on there, thanks for trying to help guys :)
     
    duxieking, Jul 2, 2016 IP