Hey ninjas / ninjarettes, in this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.
In this example I’ll use the onclick event to create a ‘show more’ style content box which expands and shrinks as you click the button.
Any questions, fire away :).
SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1
========== JavaScript for Beginners Playlist ==========
========== CSS for Beginners Playlist ==========
========== HTML for Beginners Playlist ==========
========== The Net Ninja ============
For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk
========== Social Links ==========
Twitter – @TheNetNinja – https://twitter.com/thenetninjauk
Original source
24 responses to “JavaScript Tutorial For Beginners #40 – The onClick Event”
Great series! But the volume of the intro kills me every time… especially when I got headphones on
You are awesome
i like your accent. it reminds me of my trip to Australia. beautiful country….
For those who have written the code exactly, and then been pulling hairs out to look for a missed letter:
Research the async and defer v.s. the method of placing the script at the bottom of the body
http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup
amazing tutorial you lovely man!
Hey,Ninja!Thanks for the video!
But, I have an error.
Cannot set property 'onclick' of null !!!!!!!!!!!!!!!!!!!!!!!!!!!!
hey could someone link me to a website that i can download java script on?
i cant seem to find one :p
Really cool and easy to understand. Thank you very much! 🙂
I have 4 buttons and each displays different div item. Onclick each button will show in a content Display Div . but must close whatever is already showing. How can I achieve that.
Awesome bro! I liked the clarity in your explanation. I just subscribed. Keep up the good work.
cool, ty!
Umm can you help me with my code?
https://jsfiddle.net/pfbkbzm0/
I'm trying to hide the div when I press 'button2' but it doesn't seem to work. Thanks in advance!
.open ??? is it an built in attribiute in javascript???
Hi, thank you for this. I have a question however, I actually need multiple of these on my page, however this one only works on first div, can you help?
What if, instead of using #content we use .content. how we are gonna add the class .open without removing the class .content? Thank you 🙂
how to get these CSS & HTML codes ??
hi ninja!
thank you for making these educational videos. These tutorials help me a lot. I did almost the same thing, but I gave my content ''position: fixed''. for some unknown reason, when I click the button, content appears faster than content div… any suggestions?
i want you to create a popup box… when you click on a button a box is shown in the middle of the screen.
I implemented the code into my webpage, upon having watched your presentation. Notwithstanding, in spite of the successful realisation of the visual commands, including the substitution of "Show More" for "Show Less" and vice versa, I failed at correctly setting up the code in order to provide for the stainless implementation of it. despite having read multiple threads online, having thoroughly perused. my own programm, being a complete and utter tyro
myself (it has only been a few months ago, ,that I began to code), I do struggle with the problems resolution.
here is the link to my programm :
http://codepen.io/Pukii/pen/jrqPbd
thank you in advance!
It's animating when opening, but not when closing, why?
https://jsfiddle.net/9pq0jy3e/
hey man i really want to thank for this awesome tutorials..u really made it precise and perfect …i have learnt so much from this tutorial video
Hey, Ninja!
Why my code doesn't work? https://jsfiddle.net/3upezq74/
I want assign label content into session variable,
plz help
Hi, Ninja,
I have typed all ur codes, but it shows error " Expect '===' and instead saw '== ', error at " if (content.className == "open") ". Then I change to it "==", but the button is not working. Help? Thanks.