Making a website on wordpress with a custom theme and I’ve written some Javascript.

javascript file is referenced in the head.

I originally had each function in its own $(document).ready(function () { This worked fine, all javascript executed.

I know its not best practice so I set each part up in its own function and then called all the functions inside 1 $(document).ready(function () {

But now the last function called in the document ready for my sidenaviagtion isn’t working. But if I copy the code and paste it into the console, it then works. It’s like the last function isn’t being read at all.

Any thoughts?

Below is my current code and then below that was the original code where each bit was in a document ready

Website is: 128sqnatc.org.uk

MainNav(); is the mobile navigation

eventImage(); moves the event image to the top of the event div: 128sqnatc.org.uk/events/

homepageModal(); Open a video on the homepage – button at the bottom

sideNavigationModal(); is the side nav: 128sqnatc.org.uk/activities/team-sports/

eventDate(); positions the end date next to the start date horizontally

current code

    // MAIN NAV
function mainNav() {

    $("#navIcon").on('click', function(){
  $('.menu-main-menu-container').toggleClass('anim');
  $('.overlay').toggleClass('overlayZindex ');
});

    $('.animation').click(function(){
        $('.anim').toggleClass('reverse-animation');
    })

$('#navIcon').click(function(){
    $(this).toggleClass('open');
});
}


// Move events image to top
function eventImage() {
setTimeout(function(){


  // Loop each li
  $( "ul.event-list-view li" ).each(function( index ) { 
    // Move image into .event-info
    $(this).prepend($(this).find(".event-details img"));
  });

  }, 10000);
}




// HOMEPAGE MODAL VIDEO
function homepageModal() {
// Get the button that opens the modal
const btn = document.getElementById("videoBtn");

// Get the modal
const modal = document.getElementById("myModal");

// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];

btn.addEventListener('click', (event) => {
    modal.style.display ='block';
});

// When the user clicks on <span> (x), close the modal
span.addEventListener('click', (event) => {
    modal.style.display ='none';
});

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
}



// SIDENAV MODAL
 function sideNavigationModal() {
// Get the button that opens the modal
const sideBtn = document.getElementsByClassName("sideNav")[0];
const sideBtn2 = document.getElementsByClassName("sideNav")[1];

// Get the modal
const sideModal = document.getElementById("sideNavModal");

// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];

sideBtn.addEventListener('click', (event) => {
        sideModal.style.display ='block';

 $('.sideModal').removeClass('sideNavMenuClose').addClass('sideNavMenuOpen');
        $('.header').removeClass('sideNavPageIn').addClass('sideNavPageOut');
        $('.footer').removeClass('sideNavPageIn').addClass('sideNavPageOut');
        $('.main').removeClass('sideNavPageIn').addClass('sideNavPageOut');
        $('.title').removeClass('sideNavPageIn').addClass('sideNavPageOut');
});

sideBtn2.addEventListener('click', (event) => {
        sideModal.style.display ='block';

$(‘.sideModal’).removeClass(‘sideNavMenuClose’).addClass(‘sideNavMenuOpen’);
});

span.addEventListener('click', (event) => { 

$('.sideModal').removeClass('sideNavMenuOpen').addClass('sideNavMenuClose');
        setTimeout(function(){
            sideModal.style.display ='none';
        }, 1500);
        $('.header').removeClass('sideNavPageOut').addClass('sideNavPageIn');
        $('.footer').removeClass('sideNavPageOut').addClass('sideNavPageIn');
        $('.main').removeClass('sideNavPageOut').addClass('sideNavPageIn');
        $('.title').removeClass('sideNavPageOut').addClass('sideNavPageIn');
});

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == sideModal) {
        //sideModal.style.display = "none";
    }
}

}

function eventDate() {

setTimeout(function(){
    if($('.event-date').hasClass('multi-date')) {
        $(".event-date div:nth-child(2)").css({"margin-left": "3.8em"});    
    } else {

    }
}, 4000);
}


$(document).ready(function () {


eventImage();
eventDate();    
mainNav();  
homepageModal();
sideNavigationModal();

});

original working JS

    // MAIN NAV
$(document).ready(function () {

    $("#navIcon").on('click', function(){
  $('.menu-main-menu-container').toggleClass('anim');
  $('.overlay').toggleClass('overlayZindex ');
});

    $('.animation').click(function(){
        $('.anim').toggleClass('reverse-animation');
    })

$('#navIcon').click(function(){
    $(this).toggleClass('open');
});
});


// Move events image to top
$(document).ready(function () {
 setTimeout(function(){


  // Loop each li
  $( "ul.event-list-view li" ).each(function( index ) { 
    // Move image into .event-info
    $(this).prepend($(this).find(".event-details img"));
  });

  }, 3000);

});




// HOMEPAGE MODAL VIDEO
$(document).ready(function () {
// Get the button that opens the modal
const btn = document.getElementById("videoBtn");

// Get the modal
const modal = document.getElementById("myModal");

// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];

btn.addEventListener('click', (event) => {
    modal.style.display ='block';
});

// When the user clicks on <span> (x), close the modal
span.addEventListener('click', (event) => {
    modal.style.display ='none';
});

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
});



// SIDENAV MODAL
$(document).ready(function () {
// Get the button that opens the modal
const sideBtn = document.getElementsByClassName("sideNav")[0];
const sideBtn2 = document.getElementsByClassName("sideNav")[1];

// Get the modal
const sideModal = document.getElementById("sideNavModal");

// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];

sideBtn.addEventListener('click', (event) => {
        sideModal.style.display ='block';

$('.sideModal').removeClass('sideNavMenuClose').addClass('sideNavMenuOpen');
        $('.header').removeClass('sideNavPageIn').addClass('sideNavPageOut');
        $('.footer').removeClass('sideNavPageIn').addClass('sideNavPageOut');
        $('.main').removeClass('sideNavPageIn').addClass('sideNavPageOut');
        $('.title').removeClass('sideNavPageIn').addClass('sideNavPageOut');
});

sideBtn2.addEventListener('click', (event) => {
        sideModal.style.display ='block';

$('.sideModal').removeClass('sideNavMenuClose').addClass('sideNavMenuOpen');
});         

span.addEventListener('click', (event) => { 

$('.sideModal').removeClass('sideNavMenuOpen').addClass('sideNavMenuClose');
        setTimeout(function(){
            sideModal.style.display ='none';
        }, 1500);
        $('.header').removeClass('sideNavPageOut').addClass('sideNavPageIn');
        $('.footer').removeClass('sideNavPageOut').addClass('sideNavPageIn');
        $('.main').removeClass('sideNavPageOut').addClass('sideNavPageIn');
        $('.title').removeClass('sideNavPageOut').addClass('sideNavPageIn');
});

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == sideModal) {
        //sideModal.style.display = "none";
    }
}

});

$(document).ready(function () {

if($('.event-date').hasClass('multi-date')) {
    $(".event-date div:nth-child(2)").css({"margin-left": "3.8em"});    
} else {

}
});

Read more here: Last Javascript function not work but does work if pasted straight into developer tools console?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: