html событие onclick: как обновить значение на основе аргумента, переданного onclick

Question

Я рассматриваю некоторые вопросы интервью на JavaScript и наткнулся на кодовую ручку со следующей строкой:

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

Я пытался сделать что-то похожее с нажатием кнопки, и знаю, что я не понимаю правильный синтаксис для обновления моего выходного значения после нажатия кнопки. Это прекрасно работает в примере codepen , который я эмулировал. Кто-нибудь знает, что мне здесь не хватает?

Я знаю, что мог бы создать функцию js, которая специально обновляет мое result.value, ссылаясь на него напрямую, но я пытаюсь сделать мою функцию добавления общей, чтобы не пришлось переписывать функцию для будущих идентификаторов ввода и вывода.

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

Проблема в том, что вы определили обработчик событий, используя атрибут onclick. Они вызывают метод, который вы определили на глобальном уровне. Однако, поскольку вы определили функцию в обработчике событий jQuery document.ready, она не находится в области видимости.

Непосредственную проблему можно исправить, переместив определение функции за пределы этого обработчика событий document.ready.

Тем не менее, вы также можете значительно улучшить логику, вообще не используя устаревший обработчик on*. Гораздо лучшая и более современная техника - использовать ненавязчивые обработчики событий. Также не стоит полагаться на тот факт, что атрибуты id элементов будут установлены в свойствах window, поскольку это может быть легко нарушено при использовании уже существующих имен полей.

Если вы предпочитаете использовать собственные методы JS, это будет выглядеть так:

document.getElementById('add').addEventListener('click', function() {
  var a = document.getElementById('inputA').value;
  var b = document.getElementById('inputB').value;
  document.getElementById('result').textContent = +a + +b;
});

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

Или то же самое в jQuery:

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

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

Answer 2

Скорее всего, проблема связана с тем, что вы определили метод add() внутри готового документа. Так как вы делаете это, это и есть метод. Это не глобальная функция, которая требуется для встроенного связывания. Попробуйте определить метод вне документа, готового в глобальной области видимости.