[fixed] Onclick not working | SoloLearn: Learn to code for FREE!

+12

[fixed] Onclick not working

I wanted to change image and text when user clicks a button. But nothing happens after clicking button 😢 Why ? https://code.sololearn.com/Wcqmj0SjU7yR/?ref=app

9/16/2020 11:42:01 AM

Prasant🔥⚡💖💕

44 Answers

New Answer

+27

"click" function name doesn't work. Please rename your function. Hope it works. Here is the explanation: https://stackoverflow.com/questions/4388443/javascript-function-name-cannot-set-as-click#:~:text=Because%20there's%20a%20.

+18

https://code.sololearn.com/W5wS74eCmjh3/?ref=app

+16

The 'click' by itself is NOT a javascript reserved keyword outside the context of the inline event handler . That is to say the "click" method defined in the question is valid. //I hope this works Try by using event handler 'externally' will work. E.g. using jQuery: $('input').click(click);

+15

wlcm :D

+9

Change the name of the click function Try anything else other than click and it will work

+7

For Cross-platform capabilities, try using this function that I, Kode Krasher and a few others brought up and have been using every since, main credits to Kode krasher const eventBasedOnDevice = navigator.userAgent.match(/ipod|ipad|iphone/i) ? 'touchstart' : 'click'; document.getElementById(/*id of whatever you want to check for clicks/*).addEventListener(eventBasedOnDevice, function event(event) { touchHandler(); //what you want to happen onclick })

+5

Ruba Kh , Satnam , Aditya Thank you all.😊 But is "click" a reserved word for JavaScript ?

+5

Prasant here are a couple demos I put together with commented code and references to the original QA discussion: https://code.sololearn.com/WIRdoua6ziEb https://code.sololearn.com/WEOxA34vox9X Vachila64☕ thanks for sharing the knowledge. 😎👍

+5

Kode Krasher Is the line navigator.userAgent.match(/ipod|ipad|iphone/i) to know whether the user device is Android/ iPhone/ other ?

+5

Prasant actually I just looked at your code, all you need to do is rename your function. You can't use click() as the function name. Rename the function to daclick() and call that function by onclick='daclick()' and your image changes. 😎👍 edit: looks like others had the solution before I was hailed? 👍

+5

Satnam Thanks for the Stackoverflow link... learned something. 😎👍

+5

Kode Krasher Hmm I could do that after a long experiment 😅😅 https://code.sololearn.com/WB2xjlW46c3c/?ref=app

+4

Aditya Oh I got it Thank you very much again 😊

+4

Sofi💞 Thank you 😊 I got it now

+4

Prasant yes. the regex looking for the 3 iOS devices is part of a conditional (ternary) operator to deal with iOS not liking to respond to 'click'. It wants 'touchstart" for window.events It doesn't really apply to your specific case. I just had to keep my SL app from crashing long enough to look at your code. Looks like the others had it figured out before I joined the party, I just couldn't read the entire thread until I switched to my ipad. Sorry for the duplicate and repeated answers. I am dealing with app crashes. Hopefully, I deleted all of the duplicates. 😣

+4

Kode Krasher Thank you very much Sir for explaining it

+4

مهان علوی مجد But I don't know what is eventlistner, as I have not completed JavaScript 😔. Can you please give an example how it works ?

+4

Prasant read through this page to understand what مهان علوی مجد suggests: https://www.w3schools.com/js/js_htmldom_eventlistener.asp NOTE: iOS devices do not like 'click' they want to see 'touchstart" but you can write a couple lines of code to handle iOS and Android, so both platforms work. The two pages I shared when I joined this thread demonstrate that use case and was why Vachila64☕ summoned me to this thread. 😉 Finish up your JavaScript course on SoloLearn and you will briefly cover it in DOM and Events Module. The W3Schools tutorial goes much more in depth with more examples. 😎👍

+4

Prasant check out this code and build on it... https://code.sololearn.com/WusyLLwMsuK6 Happy Coding! 😎👍

+4

Kode Krasher Thank you I was also thinking to use arrays, so that we can use many images as we wish. But I couldn't understand this if ( theMsg === messages[1] ) How does this count the number of clicks or how does it work ?