Блог

Для контекста я просто изучаю JS. На моей веб-странице я хочу иметь возможность создавать новые интерактивные входные данные диапазона. Я также хочу использовать значения диапазонов для уравнения. Прямо сейчас я могу добавить сами диапазоны, и они работают, но значения каждого диапазона возвращаются как undefined .

Я обнаружил это, пытаясь сделать это в JavaScript:

 document.addEventListener('input', function(event) {
    if(event.target.matches('.range')) {
        console.log(event.value);
    }
})
 

Кроме того, вот код, который я сделал для создания новых входных данных диапазона:

 function addSolvr() {
    solvContain = document.querySelector('.solveContainer')
    const solvDiv= document.createElement('div');
    solvDiv.className="rangeContain"
    solvContain.appendChild(solvDiv);
    const solvLabel = document.createElement('input');
    solvLabel.classList.add('form-label', 'rangeLabel');
    solvDiv.appendChild(solvLabel);
    const solvAssist = document.createElement('input');
    solvAssist.type="number";
    solvAssist.className="rangeAssist";
    solvAssist.value = 0
    solvDiv.appendChild(solvAssist);
    const solvRange = document.createElement('input');
    solvRange.type = "range";
    solvRange.className="range";
    solvDiv.appendChild(solvRange);
}
addBtn.addEventListener('click', addSolvr)
 

Есть ли способ получить точное значение из каждого диапазона? Возможно, будет полезно знать, что я мог делать это раньше, но это было со статическими элементами. На этот раз я использую appendChild() для создания диапазона. Спасибо!

Вы становитесь неопределенным, потому что в событии нет свойства value.

Чтобы получить доступ к значению элемента, вы должны использовать event.target.value . Таким образом, вы получаете значение целевого элемента. Вот так…

 document.addEventListener('input', function(event) {
    if(event.target.matches('.range')) {
        console.log(event.target.value);
    }
});