JavaScript Tutorial For Beginners #40 - The onClick Event

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 :).

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[lookalike]

You do a great job presenting this material. You speak clearly and the timing of how you show the code is done very well. Thank you for putting these out. A great benefit.

[venkateswarank]

It is always recommended to use content.classList.add("open") instead of content.className = "open" as the latter one may eliminate all other classes that exist in the content element.

[christinec]

I searched and search youtube trying to find someone explaining how to do this. I am SOOO glad I found your video. Others were doing variations but not this exactly. I am glad I kept searching until I found you. Subbed and Liked.

BTW it is CRUCIAL to have 2 equal signs after on the if statement. if(kitchenList.className == "open") I only have one = sign at first and the whole thing didn't work. crazy how a single = makes all the difference. (had to watch the video twice to figure out what I did wrong) THANK YOU!!!

[henrivandesign]

> Searches for 1000's of web dev tutorials
> Get targeted with Wix ads
- Yeah, Wix. Obviously I'm not trying to take a different route to building websites.

Good tutorial by the way

[brigedahernandez]

I'd been trying to get a button to work for 4 hours, and this fixed it.

[kanaanbahmani]

one of the best explanations I've ever seen on YouTube, awesome man. please keep up the great content.

[rednaldron]

i've been playing around with frontend since januari, but only html and css.
started to (try) learning JS but never understand the use together with html and css.
never found a good tutorial for exactly this this type of code with the "toggle text" function.
how you used the css with the JS got me the "aha" experience I was looking for.
thank you!!

[markeeeese]

Great series! But the volume of the intro kills me every time... especially when I got headphones on

[Andy_Leored]

OMG!!! I need to repeat again and again to get understand the logic of this method! now I get so clearly after! You are rock man!

[hasratsabit]

Awesome bro! I liked the clarity in your explanation. I just subscribed. Keep up the good work.

[uniqueroleplay]

You can also instead of writting else { ... } => else if { content.className = " open ", button.innerHTML = " Show Less " }

[rohannayak]

Can u provide the code used in the example

[dolphinsupreme]

I've been looking for something like this for the longest. Good video dude. Watching with adblock off just cause content is what I want.

[djmtype]

Even though the transition timing on max-height is set equally on both occurrences, show more and show less, the transition appears faster on opening and slower on closing. How can we set it so it appears equally as fast?

[HUDSONBEATS]

The way he says "button" is way too funny

[kemmrthappy]

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

[OliverGomes]

This is so cool, getting hands-on JS experience and no wonder JS is awesome !

[preemanantz]

Thanks, didn't use it for the expanding of text, but still useful for a general onclick function.
Very cool.

[sire]

This is grate mine turned out perfectly 🤩 now I’m getting better in making buttons to function thanks 👏

[hasibhossen]

Hi Ninja,
I just write the same code but its not working for me . what to do then?