Question

我刚开始学习JS中的DOM操作，并且遇到了大部分传递事件的事件处理函数的单个参数，例如getSum(this)。假设我们在script标签中有一个简单的加法函数，我已经在表单中包含了这些输入元素，就像这样：

<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>

我正在尝试重写，以便可以消除使用form元素，因为其中仅包含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>

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

Answer 1

改为在<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>

虽然您可以通过在内联处理程序中使用getElementById来在技术上进行一些微调，但是在几乎所有情况下都应避免使用内联处理程序：

<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)">

Answer 2

通常，您应该在JavaScript而不是HTML中执行此操作。

类似这样的东西

function getSum() {
  let op2Value = document.getElementById('op2').value;
  let op1Value = document.getElementById('op1').value;
  document.getElementById("output").innerHTML = (Number(op1Value) + Number(op2Value));
}

<input type="number" id="op1" name="op1" placeholder="op1">
<input type="number" id="op2" name="op2" placeholder="op2" oninput="getSum()">

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

2 个答案: