Q:

html onclick event: how to update a value based on argument given to the onclick

I'm reviewing some javascript interview questions, and came upon a codepen with the following line:
<form oninput="result2.value=add(parseInt(c.value))(parseInt(d.value))">

I've tried to do something similar with a button press, and know see that I don't understand the proper syntax to update my output value upon the button-press. It works fine in the codepen example I was emulating. Does anyone know what I'm missing here? 
I know I could create a js function that specifically updates my result.value by referencing it directly, but I'm trying to make my add function general so that don't have to rewrite function for future input and output id'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;
  }
});

A:

The issue is because you've defined the event handler using an onclick attribute. These call the method you defined at a global level. However as you defined the function within the jQuery document.ready event handler it's not in scope. 
You can fix the immediate problem by moving the function definition outside of that document.ready event handler.
That said, you can also massively improve the logic by not using the outdated on* event handler at all. A much better and more modern technique is to use unobtrusive event handlers. It's also not advisable to rely on the fact that the id attributes of elements will be set to properties on the window as this can easily by broken when using field names which already exist.
If you'd prefer to use native JS methods, it would look like this:

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>

Or the same in 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>

