Onclick event

[smus]

So onclick event on a desk-, laptop computers does the same as when we tap on an element on our mobile devices, right? I always thought these two actions are totally similar.

Why then the function might not be working 'on tap', however everything works fine on PC?

I checked the browser version on a mobile device, it supports HTML5 tags. I also tried to create a simple function showing message using 'alarm' and it also works. 

What might be a possible reason?

Edited October 2, 2018 by smus

[justsomeguy]

Mobile devices have their own set of events.  There are actual touch events.  Some mobile browsers might, and probably do, implement onclick also, but there are a series of events just for touch screens.

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Do you mean alert instead of alarm?  If your basic test using alert works, and something else doesn't work, then the problem is not the event, but whatever you're doing in the handler.

[smus]

20 hours ago, justsomeguy said:

Mobile devices have their own set of events.  There are actual touch events.  Some mobile browsers might, and probably do, implement onclick also, but there are a series of events just for touch screens.

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Do you mean alert instead of alarm?  If your basic test using alert works, and something else doesn't work, then the problem is not the event, but whatever you're doing in the handler.

Oh, yes, right, it is 'alert'. There are some <audio> tags involved, and my function makes one of them start playing, depending on data-key id:

<strong id="76" onclick="makeLaughM(this.id)">L is for Laugh</strong><br>

<audio id="76" data-key="76" src="audio/smex.wav"></audio>
<audio id="65" data-key="65" src="audio/laugh.mp3"></audio>
<audio id="85" data-key="85" src="audio/laugh2.mp3"></audio>
<audio id="71" data-key="71" src="audio/snortlaugh.mp3"></audio>
<audio id="72" data-key="72" src="audio/femalelaughter.mp3"></audio>

<script>
function makeLaughM(a){
       const audio = document.querySelector(`audio[data-key="${a}"]`);
       audio.currentTime = 0;
       audio.play();
       document.getElementById(a).classList.add('playing');
       document.getElementById('facecolor').style.fill = "orange";   
     }
</script>

 

[justsomeguy]

So, what's happening?  If you put an alert inside that function, you don't see the alert on mobile browsers?  If you do see the alert, I would suspect using a template string for querySelector.  I would also point out that you have multiple elements with the same ID.

[smus]

7 minutes ago, justsomeguy said:

So, what's happening?  If you put an alert inside that function, you don't see the alert on mobile browsers?  If you do see the alert, I would suspect using a template string for querySelector.  I would also point out that you have multiple elements with the same ID.

No IDs are different. I've just tried putting an 'alert' directly onclick, and it worked. The function doesn't work at all, no matter what's inside. 

[justsomeguy]

No IDs are different.

Not according to what you posted above.  I see 2 elements with the ID "76".  

I've just tried putting an 'alert' directly onclick, and it worked. The function doesn't work at all, no matter what's inside.

OK, I'm confused.  Does alert work, or does it not work, when it is in your onclick handler?  When the only line of code inside your onclick handler is a call to alert, do you see it?  You need to actually comment out or remove the other lines of code to test that, just adding an alert line is not the right test.

[smus]

30 minutes ago, justsomeguy said:

Not according to what you posted above.  I see 2 elements with the ID "76".  

Exactly, you are right. I am using duplicate IDs here only for getting them from inside of the tag, the function uses data-keys.

33 minutes ago, justsomeguy said:

OK, I'm confused.  Does alert work, or does it not work, when it is in your onclick handler?  When the only line of code inside your onclick handler is a call to alert, do you see it?  You need to actually comment out or remove the other lines of code to test that, just adding an alert line is not the right test. 

Here is how I am checking:

<strong id="76" onclick="alert(this.id)">L is for Laugh</strong><br>

It works on both PC and mobile

[justsomeguy]

Exactly, you are right. I am using duplicate IDs here only for getting them from inside of the tag, the function uses data-keys.

It also uses the ID:

document.getElementById(a).classList.add('playing');

Maybe that gets different elements on a desktop versus mobile device.  Maybe one gets one element, and another gets the other element with that ID.

It works on both PC and mobile

OK, so onclick is working fine, and the problem is the code inside your function.  That's where you need to focus, not whether the event itself is firing.

[smus]

Commented this string: document.getElementById(a).classList.add('playing'); Erased the ids from all the <audio> tags. It is the same: there is no sound. I even tried to include audio tag independently and check whether it is working on my mobile device, and it was working. I think I need to check my function in a different way.

Might there be the absence of EcmaScript support by the mobile device browser?

I suspect that it may not work because of how it takes the data-key parameter from the audio tag:

const audio = document.querySelector(`audio[data-key="${a}"]`);

[dsonesuk]

You seem to be using backticks instead of single quotes and what is ${a} ?

try instead

const audio = document.querySelector("audio[data-key='"+a+"']");

 

Edited October 4, 2018 by dsonesuk

[smus]

59 minutes ago, dsonesuk said:

You seem to be using backticks instead of single quotes and what is ${a} ?

try instead

const audio = document.querySelector("audio[data-key='"+a+"']");

 

Changed - absolutely the same.

This code also works on the web, but does not on a mobile device:

<audio class="newAudio" src="../audio/femalelaughter.mp3"></audio>

<strong onclick="playSound()">alink</strong>

<script>
     function playSound(){
       const audio = document.querySelector(".newAudio");   
       audio.currentTime = 0;
       audio.play();     
     }
</script>

What else? I also tried different browsers on my phone. I have Windows Phone, can anyone try it on iPhone or Android?

 

Edited October 4, 2018 by smus

[dsonesuk]

Try using a clickable button tag instead of a strong tag, and use addEventListener function instead of onclick.

change from

https://www.w3schools.com/code/tryit.asp?filename=FVWDLMC307SL

to

https://www.w3schools.com/code/tryit.asp?filename=FVWCRRM44EPF

OR

https://www.w3schools.com/code/tryit.asp?filename=FVWESHN5IKOK

All work for Desktop and android phone

Edited October 4, 2018 by dsonesuk

[smus]

Thanks, dsonesuk, I tried to transform the code as you've suggested. It doesn't work on my mobile device. If it is working on Android, it must be because the browser on the phone does not fully support HTML5. This code:

 <audio controls>
  <source src="../audio/smex.wav">
  Your browser does not support the audio tag.
</audio>

is working on Desktop, but gives the 'Invalid source' on the phone.

[dsonesuk]

Is your windows phone using discontinue IE mobile? wav format type are not supported by IE browsers according to https://www.w3schools.com/Html/html5_audio.asp. You might want to include mime type using type attribute, to see if that makes a difference.

mp3 is supported in all the mainstream browsers.

Edited October 4, 2018 by dsonesuk

[justsomeguy]

You seem to be using backticks instead of single quotes and what is ${a} ?

That's part of a template literal, which probably doesn't need to be used as a selector.

[Ingolme]

For reference, templates are described here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

[smus]

dsonesuk, I used IE, UCBrowser, TouchBrowser on my WP.

I decided to cancel all the changes I've made in the code and to check it on an Android device. Everything works perfectly! Seems they didn't update browsers for WP for a long period of time.

Thanks, dsonesuk and Ingolme