CODEWITHSUNDEEP
javascript
Grady D
Grady D

Reputation: 2039

EventListener showing wrong target

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, enter image description here

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.

Upvotes: 0

Views: 1041

Answers (2)

Deep
Deep

Reputation: 9794

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

Upvotes: 2

Grady D
Grady D

Reputation: 2039

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

Upvotes: 0

Related Questions