smus Posted October 2, 2018 Share Posted October 2, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted October 2, 2018 Share Posted October 2, 2018 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. Link to comment Share on other sites More sharing options...
smus Posted October 3, 2018 Author Share Posted October 3, 2018 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> Link to comment Share on other sites More sharing options...
justsomeguy Posted October 3, 2018 Share Posted October 3, 2018 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. Link to comment Share on other sites More sharing options...
smus Posted October 3, 2018 Author Share Posted October 3, 2018 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 3, 2018 Share Posted October 3, 2018 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. Link to comment Share on other sites More sharing options...
smus Posted October 3, 2018 Author Share Posted October 3, 2018 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted October 3, 2018 Share Posted October 3, 2018 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. Link to comment Share on other sites More sharing options...
smus Posted October 4, 2018 Author Share Posted October 4, 2018 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}"]`); Link to comment Share on other sites More sharing options...
dsonesuk Posted October 4, 2018 Share Posted October 4, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
smus Posted October 4, 2018 Author Share Posted October 4, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 4, 2018 Share Posted October 4, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
smus Posted October 4, 2018 Author Share Posted October 4, 2018 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 4, 2018 Share Posted October 4, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted October 4, 2018 Share Posted October 4, 2018 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. Link to comment Share on other sites More sharing options...
Ingolme Posted October 4, 2018 Share Posted October 4, 2018 For reference, templates are described here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals Link to comment Share on other sites More sharing options...
smus Posted October 8, 2018 Author Share Posted October 8, 2018 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now