Mam 2 słuchaczy: jeden wywołuje inny. Pytanie brzmi: Jeśli słuchacz drugi (zagnieżdżony) wie, gdzie w dokumencie uruchomiono pierwszy słuchacz? To znaczy, kiedy używam dodatku do 50 pól w kolumnie, a w tym słuchacz wywołaj inny słuchacz, a następnie drugi "zna" pozycję (mam na myśli pole, w którym został kliknięty) pierwszego? Staram się radzić sobie z tym problemem - nie wiem, czy jakoś drugiego słuchacza "dziedziczy wartości zmiennych z pierwszej. Na przykład:

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); 
 });
}

Kod ten działa tylko za pierwsze wyzwolenie drugiego słuchacza (więc kiedy wywołam pierwszy słuchacz, a potem drugi), dla następnych, nie działa, nie pojawiają się alertów. Czy to znaczy, że muszę ponownie szukać najbliższego elementu w drugim słuchaczu?

0
Muska 21 październik 2020, 02:07

1 odpowiedź

Najlepsza odpowiedź

Jeśli utworzysz nowy element wejściowy za pomocą document.createElement zamiast wpisując ciąg w innerHTML, możesz przejść na nowym elemencie wejściowym do drugiej funkcji, a nie potrzebujesz {{x2} } w ogóle.

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")
    })
    
}
1
Kokodoko 21 październik 2020, 15:54