Передать массив в eventListener

Question

У меня есть чекбокс. При состоянии checked он должен мне выводить таблицу составленную из массива, по состоянию !checked убирать ее. Логику построения самой таблицы сделать легко, но я не могу разобраться с тем как передать полученый массив в eventListener.

В .html файле кусок с чекбоксом и лейблом выглядят как:

<div class="summary-row-toggler-il">
    <label for="summary-row-toggler-input" id="summary-row-toggler-label">Summary Row</label>
        <input type="checkbox" id="summary-row-toggler-input" checked="false">
</div>

В своем основном файле я вызываю импортированную функцию и передаю ей определенный массив.

summaryRowToggle(array)

Для начала хотел просто вывести на экран полученный массив в это функции в связке с чекбоксом.

SummaryRow.js:

export default function summaryRowToggle(array) {
    const toggleCheckboxInput = document.querySelector('#summary-row-toggler-input')
    const toggleCheckboxLabel = document.querySelector('#summary-row-toggler-label')

    toggleCheckboxLabel.addEventListener('click', () => {
        if (toggleCheckboxInput.checked)
            console.log(array)
    })
}

Вполне ожидаемо что по нажатию на лейбл я не получаю в вывод ничего. Пытался что-то искать в интернете и нашел разве что описывание вывода в функции и ее подтягивание в ивентЛистнер

const printArr(arr) {
    console.log(arr)
}

button.addEventListener('click', printArr)

Но у меня не получилось это сделать рабочим.

Answer 1

Массив можно отобразить вот так:

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];


const chb = document.getElementById("summary-row-toggler-input");

chb.addEventListener('change', e => {
  if (chb.checked) {
    const body = document.querySelector('body');
    const div = document.createElement('DIV');
    div.setAttribute('id', 'wrapper-array');
    div.textContent = `Array = [${array}]`;
    body.append(div);
  } else {
    const wa = document.getElementById('wrapper-array');
    if (wa) wa.remove();
  }
});

<div class="summary-row-toggler-il">
  <label for="summary-row-toggler-input" id="summary-row-toggler-label">Summary Row</label>
  <input type="checkbox" id="summary-row-toggler-input">
</div>

БЛОГ НА HUSL

Передать массив в eventListener

Ответы (1 шт):