0

I'm a novice of JS and I'm trying to get this result (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup) but I've got some problem with the mobile view of this code...it works good on every other devices but not on iPhone (x, 8, etc). How is it possible?

function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}
Andrew Regan
  • 5,087
  • 6
  • 37
  • 73
Jacopo Di Capua
  • 1
  • 1
  • Use this link do debug your JS code https://stackoverflow.com/questions/9548228/website-javascript-not-running-on-iphone-safari – Anup Tilak Sep 21 '19 at 17:21

1 Answers1

2

If the problem happens exactly on Safari, it might be due to the missing cursor: pointer; in your CSS.

Safari doesn't like to fire your functions on HTML elements that don't follow certain conditions.

By the way, even if they do (according to my personal experience) it's not guaranteed that your listeners will actually fire.

It happens due to the fact that browsers like Safari or IE seems to be more about a good joke than a good browser.

How do we deal with that?

Well, IRL we mostly use some libraries (for instance, Vue or React) that perform cross-browser optimization better than we do.

For your simple use case, you might want to convert your "myPopup" element into a zero-styled button.

All major browsers tend to work more or less ok with buttons.

Igor Bykov
  • 2,532
  • 3
  • 11
  • 19
  • It doesn't work also on chrome, the fact is that I copy this code -> https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup exaclty but it doesn't work..how can I convert myPopup into a zero styled button? – Jacopo Di Capua Sep 23 '19 at 08:08
  • @JacopoDiCapua well if you just copy & paste it, the problem as well might be in absence of some necessary information in ``, for instance, character encoding is clearly missing in the code snippet. Where do you host it to see it from an iPhone by the way? – Igor Bykov Sep 23 '19 at 08:18
  • @JacopoDiCapua Ok, thanks. It doesn't work on this site since it seems to have 2 different layouts, 1 for Desktop & 1 for mobile. Both layouts have an element with id "myPopup". The `document.getElementById` in case of duplicated ids, [will normally returns the first element with matching id](https://stackoverflow.com/a/11528756/9430588) & in your case, the desktop version happens to be upper in HTML structure than mobile version, so, you always call Desktop pop-up which is not visible on mobile version. Solution: use unique IDs & make code handle this correctly or use one responsive layout. – Igor Bykov Sep 23 '19 at 10:55