JavaScript中获取输入框值并在onclick传值报错：ReferenceError: n1 is not defined

你遇到的ReferenceError: n1 is not defined错误，核心原因是现代浏览器不再自动把带有name属性的DOM元素暴露为全局变量了——过去有些旧浏览器会默认这么做，但现在这已经不是标准行为，所以直接写n1会找不到对应的输入框元素。

另外还要提一句，你函数里的alert(fn+ln)明显是笔误吧？应该是alert(n1 + n2)，不然运行起来还会遇到fn和ln未定义的错误哦。

下面给你几种可行的解决方案：

方案1：通过document.getElementsByName获取输入框值 #

直接在onclick里用DOM API获取输入框的value，因为getElementsByName返回的是元素集合，所以要通过索引[0]取第一个匹配的元素：

<script>
function addData(n1, n2) {
  alert(n1 + n2); // 修正笔误
}
</script>
<body>
  <input type="text" name="n1">
  <input type="text" name="n2">
  <button onClick="addData(document.getElementsByName('n1')[0].value, document.getElementsByName('n2')[0].value)">click</button>
</body>

方案2：给输入框添加id，用document.getElementById获取（更推荐） #

id是DOM元素的唯一标识，用getElementById获取元素更可靠、性能也更好：

<script>
function addData(n1, n2) {
  alert(n1 + n2);
}
</script>
<body>
  <input type="text" id="n1" name="n1">
  <input type="text" id="n2" name="n2">
  <button onClick="addData(document.getElementById('n1').value, document.getElementById('n2').value)">click</button>
</body>

方案3：在函数内部获取值（更符合现代JS实践） #

把参数传递的逻辑放到函数内部，避免在HTML标签里写过多JS代码，这样代码结构更清晰、也更易维护：

<script>
function addData() {
  const n1Value = document.getElementById('n1').value;
  const n2Value = document.getElementById('n2').value;
  alert(n1Value + n2Value);
}
</script>
<body>
  <input type="text" id="n1" name="n1">
  <input type="text" id="n2" name="n2">
  <button onClick="addData()">click</button>
</body>

内容的提问来源于stack exchange，提问作者Vijay Makwana