Learning JS

[drose379]

Hey guys, Im trying to create a function that grabs a custom data-attribute and prints it out in a text area below. Ive got this code so far: http://pastie.org/9585711 But, I did not write it and there are a few parts I do not understand, First and most importantly, how does the JS know to run when a button is clicked, there is no trigger in the HTML. For more code, please comment.

[__]

The “trigger” is the addEventListener part. You’ll need to read up on event handling to get a thorough understanding, but the basic setup is like so:

• some event happens (e.g., a click).
• the event “captures” (moves from the top of the document down the the element that was actually clicked)*
• the event “bubbles” (moves from the element clicked up to the top of the document)
• when a DOM element has a “listener” and an event bubbles past it, that listener runs a function (an “event handler”).

* browsers do things differently. don’t rely on event capturing. bubbling is more reliable (and makes more sense, IMO). use bubbling.

So, we have this (relevant) structure:

html
    body
        section#comments
            article.comment
                button

When someone clicks on the button, it creates a “click” event. That event bubbles from the button up to article.comment to section#comments to body to html.

section#comments has our event listener. When the click event bubbles past, the listener runs the replybox_onClick function (which I just realized is badly named, but whatever). It passes the event object to the function (as the event argument), and the function does its thing.

edit: I changed the event handler name because it was bad. I know this pen will probably never even be looked at again but it bugged me.

[__]

You might wonder why I’m not putting the listener on the button itself. This is because we have some unknown number of buttons (depending on how many comments there are), and this allows us to attach only one event listener to handle all of them.

[Alen]

First and most importantly, how does the JS know to run when a button is clicked, there is no trigger in the HTML.

This line stores the target in the variable comments

var comments = document.getElementById('comments');

Then later,

comments.addEventListener('click',replybox_onClick);

Event listener is attached to listen to any clicks, then it just runs the replybox_onClick function.

Hope that helps,
-Alen

http://codepen.io/anon/pen/xawed

[__]

Regarding you JS error, is this where you’re adding the script:

<script type='text/javascript' src='javascript/main.js'></script>

?

If so, the reason the browser can’t find your #comments section because it doesn’t exist yet. As I mentioned in the demo pen, you need to either run the function on document ready, or put the script at the end of the page. This way, you can be sure that the browser has finished building the DOM before you start trying to work with it.

In most cases, putting the script at the end of the HTML (just before </body>) is the easiest solution, but check out this S/O answer for more complete info on ways to solve this.

[__]

Regarding your “@null” result:

You’ve structured your HTML differently than my JS expects. It’s looking for data-author on the article itself, while your HTML defines a span inside the article with data-username. One or the other needs to change so the attribute is where the script looks for it.

[__]

Ok, how does your script know only to look for an article?

It’s looking for the button’s parent element, which is the article in my demo. Remember when we were talking about what .parentNode does?

If your HTML looks like this:

 <div class='commentbox'>
    <p>Hey, I'm the new user!</p>
    <span class='detail1' data-username='newuser'>newuser</span>
    <button>Click</button>
    </div>

Then to find data-username from the button event, you’d do

var username = 
    // button that was clicked
    event.target 
    // parent element (the article)
    .parentNode
    // child element with data-username attribute
    .querySelector('[data-username]') 
    // "newuser"
    .getAttribute('data-username');

[Author]

Posts