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, Nov 22 '14 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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener). — DontVoteMeDown, Nov 22 '14 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, Nov 22 '14 at 13:14

score 1 · Accepted Answer · answered Nov 22 '14 at 13:19

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 '14 at 13:19

DontVoteMeDown

21,122
10
69
105

It works! I can't tell you how happy I am right now - thank you – Doug Fir Nov 22 '14 at 13:31
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? – Doug Fir Nov 22 '14 at 13:33
1

@DougFirr yes, you got it. In any event you will receive the *event* object in the first parameter. – DontVoteMeDown Nov 23 '14 at 11:21

Struggling to add event listener to array or Node List

1 Answers1