Home › Forums › JavaScript › Learning JS
- This topic is empty.
-
AuthorPosts
-
September 22, 2014 at 1:21 pm #184151
drose379
ParticipantHey 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.September 22, 2014 at 1:37 pm #184153__
ParticipantThe “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 toarticle.comment
tosection#comments
tobody
tohtml
.section#comments
has our event listener. When the click event bubbles past, the listener runs thereplybox_onClick
function (which I just realized is badly named, but whatever). It passes the event object to the function (as theevent
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.
September 22, 2014 at 1:38 pm #184154__
ParticipantYou 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.September 22, 2014 at 1:40 pm #184155Alen
ParticipantFirst 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,
-AlenSeptember 22, 2014 at 2:04 pm #184156__
ParticipantRegarding 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.September 22, 2014 at 2:10 pm #184157__
ParticipantRegarding your “@null” result:
You’ve structured your HTML differently than my JS expects. It’s looking for
data-author
on thearticle
itself, while your HTML defines aspan
inside the article withdata-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__
ParticipantOk, 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 dovar 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');
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.