JavaScript DOM学习：实现输入两数求和功能的函数选择及代码问题咨询

嘿，刚入门DOM的话咱们先把你的代码问题理顺，再聊聊这个需求里该用啥、该避啥~

修正后的完整可运行代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
    <title>数字求和工具</title>
</head>
<body>
<div id="warp">
    <form id="sumForm">
        <input id="first" type="number" placeholder="输入第一个数字">
        <input id="second" type="number" placeholder="输入第二个数字">
        <button type="submit">计算求和</button>
        <div id="resultContainer"></div> <!-- 专门用来展示结果的容器 -->
    </form>
</div>
<script>
// 这里直接把JS写在HTML里方便测试，实际项目建议单独放JS文件
const form = document.getElementById('sumForm');
const resultBox = document.getElementById('resultContainer');

form.addEventListener('submit', function(event) {
    // 阻止表单默认的刷新页面行为，这是交互的关键
    event.preventDefault();

    // 必须在点击提交时才获取用户输入的值（之前你页面加载就拿，那时候用户还没输入呢！）
    const firstVal = document.getElementById('first').value;
    const secondVal = document.getElementById('second').value;

    // 转成数字，记得给parseInt加第二个参数10，避免把0开头的数当成八进制解析
    const num1 = parseInt(firstVal, 10);
    const num2 = parseInt(secondVal, 10);

    // 做个简单的输入验证，避免非数字输入导致计算出错
    if (isNaN(num1) || isNaN(num2)) {
        resultBox.textContent = '请输入有效的数字哦！';
        return;
    }

    // 计算并展示结果
    const total = num1 + num2;
    resultBox.textContent = `求和结果：${total}`;
});
</script>
</body>
</html>

推荐使用的函数/方法 #

• document.getElementById(): 最高效的元素获取方式，因为ID是页面唯一的，查找速度快，新手优先用这个。
• addEventListener(): 绑定事件的最佳实践，支持给同一个元素绑定多个同类型事件，还能随时用removeEventListener()移除，比老式的onclick灵活太多。
• parseInt()/Number(): 把输入的字符串转成数字，注意parseInt一定要加第二个参数10（指定十进制），避免旧浏览器把012这种开头的数当成八进制解析。
• event.preventDefault(): 处理表单提交时必须用，不然页面会自动刷新，之前的计算结果直接就没了。
• textContent: 设置元素的文本内容，比innerHTML安全（不会执行用户输入的HTML代码，避免XSS风险），性能也更好。

应该避免的写法/函数 #

• 不要在页面加载时就获取input的value：就像你原来的代码那样，页面刚加载时用户还没输入，拿到的是空字符串，必须在事件触发时（比如点击提交）再取值。
• 尽量别用行内onclick（比如你HTML里的onclick="calcul()"）：这种写法把HTML和JS混在一起，代码难维护，还容易出作用域问题，优先用addEventListener。
• 别写错事件绑定：比如你原来的res.onclick(calcul)是错误的，就算写成res.onclick = calcul也不如addEventListener灵活，不推荐。
• 别用innerHTML展示纯文本结果：如果用户输入了<script>这种标签，innerHTML会执行它，存在安全隐患，用textContent就没这个问题。
• 别忽略parseInt的第二个参数：不加的话遇到012这种输入，旧浏览器会解析成10而不是12，踩坑很麻烦。

额外小技巧 #

• 可以给input加required属性，让浏览器自动帮你验证非空：<input id="first" type="number" placeholder="输入第一个数字" required>
• 用Number.isNaN()代替全局isNaN()：全局isNaN会把非数字类型先转成数字，比如isNaN('abc')会返回true，但Number.isNaN('abc')返回false（因为'abc'不是NaN），判断更准确。

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