CODEWITHSUNDEEP
javascriptcsshtml
YuRa44
YuRa44

Reputation: 19

my button isn't working on mobile device but it does works on the mobile simulator on chrome

trying to get my burger icon to show the mobile menu from hidden to block with "display", code works on desktop with chrome simulator but not on the actual mobile device. my website is www.rikuzit.co.il

window.onclick = function(event){
    var burger = document.getElementById("burgerIcon");
    var mobileMenu = document.getElementById("mobileMenu");


if(event.target == burger){
    alert("burger was pressed");
        console.log(event.target);
        mobileMenu.style.display = "block"; 
    } else {    
        alert("clicked outside burger");
        console.log(event.target);
        mobileMenu.style.display = "none";
    }
}

i expect that when the button is tapped the menu should appear.

Upvotes: 0

Views: 125

Answers (3)

Shashi Dharan Krish
Shashi Dharan Krish

Reputation: 29

(copied Shubham Chaudhary's answer) i hope this should work

window.onclick = eventHandler
window.ontouch = eventHandler


function eventHandler(event){
...
}

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44107

As shown in this answer, it's better to use touchstart for mobile devices:

window.ontouchstart = function(event){
    var burger = document.getElementById("burgerIcon");
    var mobileMenu = document.getElementById("mobileMenu");


if(event.target == burger){
    alert("burger was pressed");
        console.log(event.target);
        mobileMenu.style.display = "block"; 
    } else {    
        alert("clicked outside burger");
        console.log(event.target);
        mobileMenu.style.display = "none";
    }
}

Upvotes: 1

Shubham Chaudhary
Shubham Chaudhary

Reputation: 499

You can do something like this

window.onclick = eventHandler
window.ontouch = eventHandler


function eventHandler(event){
   ...
}

Upvotes: 0

Related Questions