Onchange 大量输入 JS vanilla答案

【问题标题】：Onchange on a lot of inputs JS vanillaOnchange 大量输入 JS vanilla
【发布时间】：2020-01-11 16:23:55
【问题描述】：

我的网站上有多个输入。使用createElement 创建的输入。我可以给每个输入类，id等。

我的目标：每次用户插入新的输入（产品数量）时，它都会计算整体价格而无需任何点击，只是自动计算（对象价格 * 输入中的数量）。

我会发布代码，但我认为图像会更好地解释它：

如何使用getElementByTagName 执行onchagne。示例将是炉排。谢谢！

【问题讨论】：

一张图片可能会有所帮助，但如果您无法在您的代码中使用它，我们需要查看您的代码（作为文本，在问题内）。
您能否分享一下index.html 您在图片中拥有的内容以及与您的问题相关的任何其他JavaScript 代码？谢谢！

标签： javascript object events onchange

【解决方案1】：

您可以使用事件委托。 input 元素上的几个事件（例如“更改”）将冒泡到容器元素，直到 DOM 的根。因此，确定哪个是共同的祖先元素，并在那里监听您感兴趣的事件。我将选择“输入”事件，因为它会触发用户通过任何输入方式进行的任何更改：

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

这样你只需要附加一个监听器。

【讨论】：

【解决方案2】：

你可以这样做

function changeHandler() {
  // on change handler
}
const inputs = [...document.getElementsByTagName('input')];
inputs.forEach(input => input.addEventListener('click', changeHandler));

【讨论】：

刚刚在 addeventlistener 中使用过，但以另一种方式，谢谢！工作:)

【解决方案3】：

您可以通过类来做到这一点，这比将您的工作应用于所有输入要好。我希望你需要这样的东西：

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 创建的新输入来添加这些侦听器。

【讨论】：