Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Click and take action! How?

HI,

How does click event's work in JavaScript?

For example, clikc button, click this and then e.g. add a element, append a div etc..?

I can't figure out on how is that a click in JS work. It should work what I do, but it doesn't, so I know I'm missing something. ANd I'm looking at the MZilla documentation all the time, though some examples aren't the best..

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

For example what i got is this

2 Answers

Redweb FED
Redweb FED
15,517 Points
Redweb FED
Redweb FED
15,517 Points

Give this site a try http://youmightnotneedjquery.com/

I've used it a fair bit when writing JavaScript myself. Just search event and you should find what your looking for :D

Alexander Davison
Alexander Davison
65,469 Points
Alexander Davison
Alexander Davison
65,469 Points

Here's a way to do it without JQuery...

In your HTML add a onclick attribute to the element you want to make the action "when clicked, do this". Set the value of the onclick attribute to the JavaScript action you want to do (usually it's calling a function in the JavaScript code so you don't really need to mix HTML and JS).

Example:

The HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Button Click</title>

        <script href="script.js" \>
    </head>
    <body>
        <h1 onclick="printToConsole();">Click this</h1>
    </body>
</html>

The JavaScript

function printToConsole () {
    console.log("You clicked the H1! Woo this worked~");
}

This code should (I'm still sort of new to front-end) print the message into the Developer Tools Console every time you click the H1.

I hope this helps. ~Alex

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Yes you are right, so how does bootstrap work without this?

ANywas, do you know how can I revmove now when clicking the overlay?

http://codepen.io/Aurelian/pen/WRrxVz