При использовании Webpack перестают работать методы для onChange

Question

Есть примерно такой код:

<select id="selectValue1" onChange="getStaticInfo('#selectValue1')">
<option selected value="Выберите значение">Выберите значение</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="selectValue2" onChange="getStaticInfo('#selectValue2')">
<option selected value="Выберите значение">Выберите значение</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<label><input name="dens" type="radio" value="auto" onchange="getRadioChecked()">Автоматический</label>
<label><input name="dens" type="radio" value="handle" onchange="getRadioChecked()">Ручной</label>

<script src="src/index.js"></script>

// JS

    function getStaticInfo(selector) {
const transmitter = document.querySelector(selector)

transmitter.addEventListener('change', () => {
    switch (transmitter.getAttribute('id')) {
        case 'selectValue1':
            levelTransmitter = transmitter.value
            someFunction1()
            break
        case 'selectValue2':
            tempTransmitter = transmitter.value
            someFunction2()
            break
    }
})


function getRadioChecked() {
let densRadio = document.getElementsByName('dens')

densRadio.forEach((elem) => {
    //some code
})

В таком виде всё работает, ошибок в консоли браузера нет. Но если применить webpack (npx webpack), и в index.html изменить путь к js-файлу на dist/main.js, то в консоли браузера получаем:

Но (!) функции внутри getStaticInfo выполняются и value из select-списка уходит куда надо, а вот радио кнопка не работает.

Почему так происходит и как это исправить?

Answer 1

Проблему удалось решить. Для этого пришлось отказаться от использования удобного атрибута событий onChange непосредственно в html.

Функция обработки события выбора элемента списка осталась без изменений, так что просто удаляем атрибут onChange из html-кода.

А вот для обработки события выбора радио-кнопки (и, как выяснилось, для checkbox тоже) необходимо обернуть input в form. Верста будет выглядеть следующим образом:

<form class="form">
<label><input name="dens" type="radio" value="auto">Автоматический</label>
<label><input name="dens" type="radio" value="handle">Ручной</label>
</form>

<form class="anotherForm">
<label><input class="input" type="checkbox" id="checkbox">Текст</label>
</form>

Функция обработки события выбора радио-кнопки:

function getRadioChecked() {
    const form = document.querySelector('.form')
    const densRadio = document.getElementsByName('dens')

    form.addEventListener('change', () => {
        densRadio.forEach(elem => {
            if (elem.checked && elem.value === 'auto') {
                // some code
            }
            if (elem.checked && elem.value === 'handle') {
                // some code
            }
        })
    })
}
getRadioChecked()

Функция обработки события установки галочки (checkbox):

function getChecked() {
const anotherForm = document.querySelector('.anotherForm')
const chbox = document.querySelector('#checkbox')
anotherForm.addEventListener('change', () => {
    if (chbox.checked) {
        //some code
    } else {
        // some code
    }
  })
}
getChecked()

Всё это довольно просто, но при поиске информации про обработку подобных событий почти все примеры с использованием атрибута onChange.

Также выяснилось, что Webpack скорее всего был не причем. Например, если без использования Webpack поместить весь javascript-код внутрь конструкции

window.addEventListener('DOMContentLoaded', () => {
// all code
})

то функции, переданные в атрибут onChange также перестанут работать (станут is not defined). Вероятно, проблема из области Event loop или контекста вызова, пока не разобрался.

БЛОГ НА HUSL

При использовании Webpack перестают работать методы для onChange

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