Struggling to add event listener to array or Node List

Question

I have an object confBtns that contains two buttons based on the following html:

<footer>
  <button id="authCreateAcctConfirmNoBtn" class="button2">
    No
  </button>
  <button id="authCreateAcctConfirmYesBtn" type="submit" class="red-button">
    Yes
  </button>
</footer>

What I would like is that when someone clicks either of these buttons, then "Yes" or "No" is then put through a function like so:

dataLayer.push({
    "event":"ButtonBlur",
    "elementText": /*What goes here to grab Yes or No depending which blurred? */
});

I could just write two separate scripts and add an event listener to each button like so:

document.querySelectorAll("#authCreateAcctConfirmYesBtn")[0].addEventListener("blur", 
    dataLayer.push({
        "event":"ButtonBlur",
        "elementText": "No"
    )}
); 
);

Then the same for the Yes button.

But how do I do it in a oner?

I tried adapting this SO post to my need but I'm spinning my wheels. Here is what I tried in the console:

var confBtns = document.querySelectorAll("#authCreateAcctConfirmYesBtn,authCreateAcctConfirmNoBtn");

btnPush = function() {
    dataLayer.push({
        "event":"ButtonBlur",
        "elementText": /*What will go here to be Yes or No?*/
    })
};

function addEventListenerConfBtns (btns, event, fn) {
    for (var i = 0, len = btns.length; i < len; i++) {
        btns[i].addEventListener(event, fn, false);
    }
}

addEventListenerConfBtns(confBtns, "blur", btnPush);

So I really have two questions:

How do I get my function to work?
How do I dynamically pass Yes or No for the value of "elementText"?

When I run this in the console I just get "undefined". I expected to be able to click and then blur a button, and then see the values of the dataLayer in the console. But no values for dataLayer from the function btnPush were present.

That is the magic of a well-indented code: You can find syntax errors. Please check your third snippet, there is a syntax error. — DontVoteMeDown
– DontVoteMeDown, Commented Nov 22, 2014 at 13:09
BTW, the third snippet have a wierd code. You are adding an object into an array in the second parameter of the addEventListener? It sould a function, please check the docs. — DontVoteMeDown
– DontVoteMeDown, Commented Nov 22, 2014 at 13:12
You're talking about doing something when somebody clicks the buttons, so why are you using the blur event rather than the click event? — nnnnnn
– nnnnnn, Commented Nov 22, 2014 at 13:14

DontVoteMeDown · Accepted Answer · 2014-11-22 13:19:30Z

1

You are messing the events. The event you really need is click, not blur, because it could be triggered when user navigates with tab, for instance.

addEventListenerConfBtns(confBtns, "click", btnPush);

And in your btnPush you receive the event as the first argument, and the target property of the event is the clicked element, so:

btnPush = function(e) {
    dataLayer.push({
        "event":"ButtonBlur",
        "elementText": e.target.innerText
    })
};

I didn't tried but it should work.

answered Nov 22, 2014 at 13:19

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Doug Fir Over a year ago

It works! I can't tell you how happy I am right now - thank you

Doug Fir Over a year ago

I don't get "e" though? So whenever I am calling a function inside an event listener function the first parameter is always the event and I can use target for the element the event was called on? What's the rule here?

DontVoteMeDown Over a year ago

@DougFirr yes, you got it. In any event you will receive the event object in the first parameter.

Collectives™ on Stack Overflow

Struggling to add event listener to array or Node List

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related