invoke Listener from other Listener

Question

I have 2 listeners: one invokes another. Question is if second (nested) listener knows where in the document the first listener was triggered? I mean when I use addEventListener for 50 fields in a column and within this listener invoke another listener then the second one 'knows' the position (I mean field where it was clicked) of the first one? I try to cope with this problem - don't know if somehow second listener 'inherits' variables' values from the first one. E.g:

document.querySelectorAll("#decisionList").forEach(elem => elem.addEventListener("change", function () {

    var selectedOptionIndex = this.options[this.selectedIndex].index;
    var invoiceDateText = this.closest('tr').querySelector('.payment').textContent.trim();
    var finalChoice = this.closest('tr').querySelector('.choice');


    switch (selectedOptionIndex) {

        case 0:
            finalChoice.innerHTML = '<input type="date">'
            break;

        case 1:
            finalChoice.innerHTML = '<input id="finalDate" type="date">'
            finalDateListener(selectedOptionIndex, invoiceDateText); //here I'm passing variables keeping current values from main Listener

        default:

            finalChoice.innerHTML = ''

    }}));




function finalDateListener(selectedOptionIndex, invoiceDateText){

const finalDate = document.getElementById("finalDate"); //'id' from parent Listener

    finalDate.addEventListener("change", function () {
        alert(invoiceDateText + ' ' + selectedOptionIndex); 
 });
}

This code works only for first triggering of second listener (so when I invoke first listener and after that the second one), for the next ones it doesn't work, no alerts shows up. Does that mean that I need to again look for closest element in second listener?

Does this answer your question? [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Oct 20 '20 at 23:13
Ids are expected to be unique within the document, by web standards. The id you are looking up is not relative to the parent listener, but the entire document, and will only return one, the very first one — Taplar, Oct 20 '20 at 23:14
Yes, but the question is how I can change it in my code, to make id relative to the parent listener. I tried many things but in vain — Muska, Oct 21 '20 at 07:12

Kokodoko · Accepted Answer · 2020-10-21T15:54:08.890

1

If you create the new input element using document.createElement instead of by typing a string in innerHTML, then you can pass on the new input element to your second function and you don't need an id at all.

document.querySelectorAll("#decisionList").forEach(elem => elem.addEventListener("change", (event) => {
    console.log("you clicked " + event.target)
    var finalChoice = event.target.closest('tr').querySelector('.choice')
    var inputElement = document.createElement("input")
    inputElement.type = "date"
    finalChoice.appendChild(inputElement)
    finalDateListener(inputElement, selectedOptionIndex, invoiceDateText)
}))

function finalDateListener(element, selectedOptionIndex, invoiceDateText){
    console.log("the new input element is " + element)
    element.addEventListener("change", ()=> {
        console.log("changed")
    })
    
}

edited Oct 21 '20 at 15:54

answered Oct 20 '20 at 23:25

Kokodoko

26,167
33
120
197

but it doesn't work. When use event.target in child Listener I have an error in a console: ```Site.js:78 Uncaught TypeError: Cannot read property 'addEventListener' of null at finalDateListener (Site.js:78) at HTMLSelectElement. (Site.js:61)``` – Muska Oct 21 '20 at 07:43
OK, I updated the answer. You can create a new input element using `createElement`. That element can be passed on to the next function. – Kokodoko Oct 21 '20 at 15:54

invoke Listener from other Listener

1 Answers1