你遇到的问题主要来自三个核心点：函数作用域限制、数值类型转换缺失，以及对原示例柯里化函数的理解差异，咱们一步步来解决：

1. 核心问题拆解 #

（1）函数作用域不可访问 #

你把add函数定义在$(document).ready()的回调内部，这个函数属于局部作用域，而按钮的onclick属性是在全局作用域下执行的，所以浏览器会直接报错add is not defined，根本找不到这个函数。

（2）字符串拼接而非数值加法 #

input元素的value属性默认返回字符串类型，直接用a + b会执行字符串拼接——比如输入1和2，结果会是"12"而不是预期的3。

（3）原示例的柯里化函数差异 #

原Codepen里的add是一个柯里化函数（返回函数的函数），写法大概是这样：

function add(a) {
  // 接收第一个参数后，返回一个接收第二个参数的函数
  return function(b) {
    return a + b;
  }
}

所以它可以用add(1)(2)的方式调用，而你写的是普通的二元函数，调用方式add(a,b)本身没问题，但得先解决前面两个问题。

2. 修正方案 #

方案一：修正内联onclick版本 #

调整函数作用域，同时添加类型转换：

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

// 把add函数放到全局作用域，确保onclick能访问到
function add(a, b) {
  // 把字符串转成数值，用Number()或者parseInt都可以
  return Number(a) + Number(b);
}

$(document).ready(function() {
  // 这里可以放其他需要DOM加载完成后执行的代码
});

方案二：更推荐的事件绑定方式（避免内联事件） #

现代前端开发更推荐用JS绑定事件，而不是写在HTML属性里，这样代码更易维护，也彻底避免作用域问题：

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

$(document).ready(function() {
  // 函数定义在ready内部也没关系，因为事件绑定在这里
  function add(a, b) {
    return Number(a) + Number(b);
  }

  // 绑定按钮点击事件
  $('#addBtn').click(function() {
    const valA = $('#inputA').val();
    const valB = $('#inputB').val();
    $('#result').val(add(valA, valB));
  });
});

3. 通用柯里化add函数（匹配原示例逻辑） #

如果你想实现和原示例一样的通用柯里化add函数，也可以这样写，它能支持add(x)(y)的调用方式，同时保持通用性，不需要硬编码DOM元素ID：

function add(num1) {
  return function(num2) {
    return parseInt(num1) + parseInt(num2);
  }
}

内容的提问来源于stack exchange，提问作者Patrick Lewis