onclick not working on safari and on mobile

Question

I have been trying to fix this bug for a long time and reached out to a few of my friends and they all were stumped. I have a website and none of the buttons are working on mobile or safari (On mobile when i tap the button the:hover animation plays). I have tried so many fixes (changing them to a tags, event listeners, tabindex, ontouchstart) and none work. The site is live and I can provide url if needed (but I don't want to look like I'm promoting)

Here is an example of a button not working -html-

<a href="javascript:void(0)" tabIndex="0" id="navWrap" onclick="openNav()" ontouchstart="openNav()">
        <div class="navLine"></div>
        <div class="navLine" id="navMid"></div>
        <div class="navLine" id="navBottom"></div>
</a>

-css-

#navWrap{
    position: absolute;
    top: 75px;
    right: 60px;
    transform: translate(0px, -50%);
    transition: 0.7s;
    font-size: 50px;
    cursor: pointer;
}

-javascript open Nav function-

function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

-javascript event listener-

window.addEventListener('load', function(){
    document.getElementById('navWrap').addEventListener('click', openNav);
    document.getElementsByClassName('closebtn')[0].addEventListener('click', closeNav);
    document.getElementById('Create').addEventListener('click', create);
    document.getElementById('TInput').addEventListener('click', MYfunctionTwo);
});

I have the link to the js file in the footer of the html file.

Answer 1

Binding multiple events like this, I hope it will work for you.

// if supported touch, otherwise click event:
let clickOrTouchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';

document.getElementById('navWrap').addEventListener(clickOrTouchEvent, openNav() );

Answer 2

I fixed it and I'm honestly not sure why it wasn't working but after a long time debugging I found that a function that I had declared (not even called) for some reason caused all JavaScript to stop working. The function was an xmlHttpRequest and when I removed it everything worked fine. This might be a bug (it worked on chrome) but it was an async request so maybe. Hope this is useful to anyone with the same problem!