时间戳

首页 > 解决方案 > 如何在 Javascript 中将一个元素的值传递给另一个元素的事件处理程序？

javascript - 如何在 Javascript 中将一个元素的值传递给另一个元素的事件处理程序？

问题描述

我是学习 JS 中的 DOM 操作的新手，我遇到的主要是传递事件处理程序函数的单个参数，例如getSum(this). 假设我们在脚本标签中有一个简单的添加功能，我已经在表单中包含了这些输入元素，如下所示：

<html>
    <body>
        <form id="operands" oninput="getSum(this)">
            <input id="op1" type="number" name="op1" placeholder="op1">
            <input id="op2" type="number" name="op2" placeholder="op2">
        </form>
        <p id="output"></p>
        <script>
            function getSum(form_input){
                form_input = document.getElementById("operands").elements;
                document.getElementById("output").innerHTML = 
                    Number(form_input.namedItem("op1").value) + 
                    Number(form_input.namedItem("op2").value);
            }
        </script>
    </body>
</html>

我正在尝试重写，以便可以消除表单元素的使用，因为其中只有 2 个子元素（输入标签），并在第二个中传递两个元素值，getSum([], this)如下所示：

<html>
    <body>
        <input type="number" id="op1" name="op1" placeholder="op1">
        <input type="number" id="op2" name="op2" placeholder="op2" oninput="getSum(*[op1's value]*, this)">
        <p id="output"></p>
        <script>
            function getSum(a, b){
                document.getElementById("output").innerHTML = (Number(a.value) + Number(b.value));
            }
        </script>
    </body>
</html>

如何将第一个输入元素的值getSum(a, b)作为参数 a 传递给函数？

标签： javascriptdom

解决方案

<script>相反，附加侦听器，并input在document.body. querySelectorAll然后，您可以使用（或您想要的任何其他方法）在正文中选择两个输入，获取每个输入的值，并显示它们的总和：

document.body.addEventListener('input', () => {
  const [aValue, bValue] = [...document.querySelectorAll('input')]
    .map(input => Number(input.value));
  document.getElementById("output").textContent = aValue + bValue;
});
<input type="number" placeholder="op1">
<input type="number" placeholder="op2">
<p id="output"></p>

虽然您可以通过使用 inline 处理程序在技术上稍微调整原始代码，getElementById但在几乎所有情况下都应避免使用 inline 处理程序：

<input type="number" id="op1" name="op1" placeholder="op1" oninput="getSum(document.querySelector('#op2'), this)">
<input type="number" id="op2" name="op2" placeholder="op2" oninput="getSum(document.querySelector('#op1'), this)">

推荐阅读