Jump to content
smus

Onclick event

Recommended Posts

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 by smus

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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}"]`);

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites
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 by smus

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×