如何通过<input>标签向JavaScript函数参数传递值
2026-5-13
解决从输入框获取参数调用sum函数的问题
我来帮你调整代码，让它能从网页输入框获取数值并计算结果。这里有个完整的可运行示例，之后我会拆解说明：
<!DOCTYPE html> <html> <body> <div> <label>第一个数：<input type="number" id="num1"></label> <label>第二个数：<input type="number" id="num2"></label> <button onclick="calculateSum()">计算总和</button> <p id="result"></p> </div> <script> function sum(a, b) { return a + b; } function calculateSum() { // 获取输入框元素 const num1Input = document.getElementById('num1'); const num2Input = document.getElementById('num2'); const resultElement = document.getElementById('result'); // 获取输入值并转换为数字（输入框默认返回字符串，必须转类型） const num1 = parseFloat(num1Input.value); const num2 = parseFloat(num2Input.value); // 简单校验输入是否有效 if (isNaN(num1) || isNaN(num2)) { resultElement.textContent = '请输入有效的数字！'; return; } // 调用sum函数并显示结果 const total = sum(num1, num2); resultElement.textContent = `计算结果：${total}`; } </script> </body> </html>
关键调整点说明：
HTML结构添加：
- 两个
type="number"的输入框，既限制用户只能输入数字，也方便后续获取数值 - 一个触发计算的按钮，绑定
onclick事件到新的calculateSum函数 - 一个
<p>标签用来显示结果，替代原来的document.write（后者会覆盖整个页面，体验很差）
- 两个
JavaScript逻辑优化：
- 新增
calculateSum函数作为中间处理层，负责获取输入、校验和调用sum函数 - 使用
document.getElementById精准获取输入框和结果元素 - 用
parseFloat把输入框的字符串值转换成数字——这是核心！如果直接传字符串给sum，会执行字符串拼接（比如"4"+"5"得到"45"而不是9） - 添加了简单的校验，当用户输入非数字内容时给出提示
- 新增
为什么原来的写法不能直接用？
原来的sum(4,5)是直接传入数字字面量，但输入框返回的是字符串类型，如果直接把字符串传给sum函数，会执行字符串拼接而不是数值相加，这就是你直接改参数会出问题的原因。
内容的提问来源于stack exchange，提问作者Gaurav Kumar
