Onchange на много входов JS ваниль - PullRequest
Новая
       23

Onchange на много входов JS ваниль

0 голосов
/ 11 января 2020

У меня есть несколько входов на моем сайте. Входы созданы с createElement. Я могу указать каждый входной класс, идентификатор и т. Д. c.

Моя цель: каждый раз, когда пользователь вводит новый ввод (количество товаров), он вычисляет общую цену без какого-либо щелчка, просто автоматизируется c расчет (цена объекта * сумма на входе).

Я бы опубликовал код, но я думаю, что изображение объяснит это лучше: enter image description here

Как я могу сделать onchagne с getElementByTagName. Пример будет натёрт. Спасибо!

Ответы [ 3 ]

2 голосов
/ 11 января 2020

Вы можете использовать делегирование событий. Несколько событий - например, «изменение» - на ваших input элементах будут пузыриться до элементов контейнера, вплоть до root DOM. Итак, определите, какой элемент общего предка, и прослушайте там интересующее вас событие. Я выберу событие «input», так как оно срабатывает при любом изменении, вносимом пользователем, любым способом ввода: 

document.addEventListener("input", function() {
    // make calculation here:
});

Таким образом, вам нужно подключить только одного слушателя.

1 голос
/ 11 января 2020

Вы можете сделать что-то вроде этого 

function changeHandler() {
  // on change handler
}
const inputs = [...document.getElementsByTagName('input')];
inputs.forEach(input => input.addEventListener('click', changeHandler));
0 голосов
/ 11 января 2020

Вы можете сделать это с классами, что лучше, чем применять свою работу ко всем вашим входам. Я надеюсь, что-то вроде этого вам нужно: 

function addInputListener(input) {
    //@todo Replace this by your data
    let row = input.parentElement.parentElement;
    let overallPriceElement = row.querySelector('.overall-price');
    let price = parseInt(row.querySelector('.price').innerText);
    let calcEvent = function() {
        //@todo Put your calc function here
        if (this.value > 0) {
            overallPriceElement.innerText = (price * this.value).toString();
        } else {
            overallPriceElement.innerText = "No products yet";
        }
    };

    input.addEventListener('input', calcEvent);
    calcEvent.call(input); // call() is here to add input context
}

// It's better to use class instead tag to do your job
let inputs = document.querySelectorAll('.amount');
// But you can also use tag do this
//let inputs = document.querySelectorAll('input');

for (let i = 0; i < inputs.length; i++) {
    let input = inputs[i];
    addInputListener(input);
}
<table>
    <thead>
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Price</th>
        <th>Amount</th>
        <th>Overall Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Bread</td>
        <td class="price">3</td>
        <td><input type="number" class="amount"></td>
        <td class="overall-price"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Bread</td>
        <td class="price">10</td>
        <td><input type="number" class="amount"></td>
        <td class="overall-price"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Bread</td>
        <td class="price">30</td>
        <td><input type="number" class="amount"></td>
        <td class="overall-price"></td>
    </tr>
    </tbody>
</table>

Вы можете вызывать функцию addInputListener(input) каждый раз, когда вы создаете новую строку, передавая непосредственно ваш новый ввод, созданный createElement, чтобы добавить этих слушателей.

...