Question

我正在审核一些javascript面试问题，然后找到了一个包含以下内容的codepen：

<form oninput="result2.value=add(parseInt(c.value))(parseInt(d.value))">

我尝试按下按钮做类似的事情，并且知道在按下按钮时我不明白正确的语法来更新我的输出值。它在我正在模拟的codepen example中工作得很好。有谁知道我在这里失踪了什么？

我知道我可以通过直接引用来创建一个专门更新我的result.value的js函数，但是我试图使我的add函数变得通用，以便不必重写函数以备将来输入并输出id＆＃39; s。

HTML：

<input id="inputA" type="number"/><br>
<input id="inputB" type="number"/><br>
<button onclick="result.value=add(inputA.value, inputB.value)">
Add A and B
</button>
<br>
<output id="result" value=""></output>

JS：

$(document).ready(function() {
    function add(a,b) {
    return a+b;
  }
});

Answer 1

问题很可能是由于您在文档中定义了add()方法。既然你这样做，它的范围是那种方法。它不是内联绑定所需的全局函数。尝试在全局范围内定义文档之外的方法。

Answer 2

问题是因为您使用onclick属性定义了事件处理程序。这些调用您在全局级别定义的方法。但是，当您在jQuery document.ready事件处理程序中定义函数时，它不在范围内。

您可以通过将函数定义移到该document.ready事件处理程序之外来解决当前问题。

也就是说，您也可以通过不使用过时的on*事件处理程序来大规模改进逻辑。更好，更现代的技术是使用不显眼的事件处理程序。也不建议依赖于id元素的window属性将设置为document.getElementById('add').addEventListener('click', function() { var a = document.getElementById('inputA').value; var b = document.getElementById('inputB').value; document.getElementById('result').textContent = +a + +b; });上的属性这一事实，因为在使用已存在的字段名称时，这很容易被破坏。

如果您更喜欢使用本机JS方法，它将如下所示：

<input id="inputA" type="number" value="1" /><br>
<input id="inputB" type="number" value="2" /><br>
<button id="add">Add A and B</button><br>
<output id="result" value=""></output>

$(function() {
  $('#add').on('click', function() {
    var a = $('#inputA').val();
    var b = $('#inputB').val();
    $('#result').text(+a + +b);
  });
});

或者在jQuery中也一样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputA" type="number" value="1" /><br>
<input id="inputB" type="number" value="2" /><br>
<button id="add">Add A and B</button><br>
<output id="result" value=""></output>

ng build

html onclick事件：如何根据onclick

2 个答案: