Javascript onclick does not work on mobile devices

Question

First and foremost, I know a little more than nothing about Javascript, so please excuse me if this is an ultra novice question.

I am trying to get this button to trigger:

<button onclick="myFunction();">Toggle</button>

My code:

 function myFunction() { var x = document.getElementById("toggle"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } 

 <button onclick="myFunction();">Toggle</button> <p id="toggle">x<p> 

Works fine on desktop and desktop responsive, but I can't get it to work on any actual mobile device.

I think the answer, through my googling, might be "add touch events", but I am not certain. Thank you for any help!

Answer 1

You have to use the "vclick" with Jquery(for example)

Example:

$( document ).on( "vclick", "p", function() {
  $( this ).append( "<span style='color:#108040;'> vclick fired... </span>" );
  });

See the docs: https://api.jquerymobile.com/vclick/

With pure JS , you can try to use the onmousedown . It works perfectly. I tested it on mobile just now. Take a look:

 function myFunction() { var x = document.getElementById("toggle"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } 

 <div id="toggle">sdfsdfsd</div> <button onmousedown="myFunction();">Toggle</button> 

Answer 2

Can you try this method?

 const btn = document.getElementById('btn'); btn.addEventListener('click', () => { alert('Click'); }); btn.addEventListener('tap', () => { alert('Mobile click / Tap'); }); 

 <button id="btn">Button</button> 

Hope this helps, have a nice day!