EventListener showing wrong target

Question

I have the following JS code

var existingMenus = document.getElementsByClassName('multiSelectMenu');
for (var i = 0; i < existingMenus.length; i++) {
    var existingMenu = existingMenus[i];
    var existingMenuHTML = [];
    var targetChildren = existingMenu.parentElement.nextElementSibling.children;
    console.log(targetChildren)
    // Here I'm adding +1 to the ID as it appears starting at zero with a styled checkbox does not work correctly
    for (var x = 0; x < targetChildren.length; x++) {
        if (targetChildren[x].selected) {
            existingMenuHTML += '<li><input class="dropdown-input" type="checkbox" id="' + (x + 1) + '" data-label="' + targetChildren[x].textContent + '" checked="true"/><label class="multiLabel" for="' + (x +
                1) + '"><span></span> ' + targetChildren[x].textContent + ' </label></li>';
        } else {
            existingMenuHTML += '<li><input class="dropdown-input" type="checkbox" id="' + (x + 1) + '" data-label="' + targetChildren[x].textContent + '"/><label class="multiLabel" for="' + (x + 1) +
                '"><span></span> ' + targetChildren[x].textContent + ' </label></li>';
        }
    }
    existingMenu.innerHTML += existingMenuHTML;
    console.log(existingMenuHTML)
    var inputs = existingMenu.children;
    console.log(inputs);
    for (var w = 0; w < inputs.length; w++) {
        var input = inputs[w].children[0];
        console.log(input);
        input.addEventListener('click', function() {
            console.log('--------------')
            console.log(event)
            var targetElement = event.target || event.srcElement;
            console.log(targetElement);
            var elementParent = targetElement.parentElement.parentElement.parentElement;
            console.log(elementParent)
            if (!elementParent.classList.contains('open')) {
                elementParent.className += ' open';
            }
            var multiList = elementParent.nextSibling.querySelector('[value="' + targetElement.dataset.label + '"]');
            console.log(multiList)
            // Subtracting one to account for the plus one I added above
            var inputId = targetElement.id - 1;
            if (targetElement.checked == true) {
                multiList.selected = "selcted";
            } else {
                multiList.selected = "";
            }
            console.log('--------------')
        });
    }
}

The code works correctly on the first instance of the multiPick but all others on page trigger the first multiSelectMenu items even though I was clicking on the 3rd multiSelectMenu on page.

Here is a screen shot of the console,

Here is a code pen, https://jsfiddle.net/6s3rc8d7/ When you click the 'label' and not the checkbox it has the same issue I am seeing.

You're missing the `event` argument to the event listener function. Not all browsers allow you to access it as a global variable. — Barmar, Jul 09 '16 at 14:44
Can you make an executable [Stack Snippet](http://meta.stackoverflow.com/questions/270944/feedback-requested-stack-snippets-2-0)? — Barmar, Jul 09 '16 at 14:55
I've added the event parameter but sadly it is still having the same issue. I can try to create a codePen but I am using a language called VisualForce that just renders HTML so there it is not exactly easy to convert the post compiled markup. — Grady D, Jul 09 '16 at 15:11

score 2 · Accepted Answer · answered Jul 09 '16 at 15:53

The reason behind getting the different event.target in your fiddle is due to the below code snippet in your html.

 <input class="dropdown-input" type="checkbox" id="1" data-label="English only">
 <label class="multiLabel" for="1"><span></span> English only </label>

you can see that in the label element, you have the for attribute which contains the id of the input element. The functionality of for attribute is that the value of this identifies which form element a label is bound to. When you click on the label it will simulate the click event of the bounded element. This is why when you click the label , in your script the event.target is the input the label is bonded with.

More on for attribute you can read here. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

See also http://stackoverflow.com/questions/24501497/why-the-onclick-element-will-trigger-twice-for-label-element/24501565#24501565 — Barmar, Jul 09 '16 at 16:12

score 0 · Answer 2 · answered Jul 09 '16 at 15:53

0

I was able to rework the code and added the EventListener to the label instead of the checkbox.

answered Jul 09 '16 at 15:53

Grady D

1,889
6
30
61

EventListener showing wrong target

2 Answers2