- This topic is empty.
September 22, 2014 at 1:21 pm #184151drose379Participant
Hey guys, Im trying to create a function that grabs a custom
data-attributeand 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.September 22, 2014 at 1:37 pm #184153
The “trigger” is the
addEventListenerpart. 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
section#commentshas our event listener. When the click event bubbles past, the listener runs the
replybox_onClickfunction (which I just realized is badly named, but whatever). It passes the event object to the function (as the
eventargument), 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.September 22, 2014 at 1:38 pm #184154
You might wonder why I’m not putting the listener on the
buttonitself. 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.September 22, 2014 at 1:40 pm #184155AlenParticipant
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
var comments = document.getElementById('comments');
Event listener is attached to listen to any clicks, then it just runs the
Hope that helps,
-AlenSeptember 22, 2014 at 2:04 pm #184156
Regarding you JS error, is this where you’re adding the script:
If so, the reason the browser can’t find your
#commentssection 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.September 22, 2014 at 2:10 pm #184157
Regarding your “@null” result:
You’ve structured your HTML differently than my JS expects. It’s looking for
articleitself, while your HTML defines a
spaninside the article with
data-username. One or the other needs to change so the attribute is where the script looks for it.September 22, 2014 at 2:14 pm #184158
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
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-usernamefrom 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');