如何实现点击计算按钮弹出加法计算结果的alert弹窗

直接使用下面的代码即可实现你需要的交互，复制保存为HTML文件打开就能运行：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加法计算</title>
</head>
<body>
    <input type="number" id="firstNum">
    <span> + </span>
    <input type="number" id="secondNum">
    <button id="calculateBtn">Calculate</button>

    <script>
        const btn = document.getElementById('calculateBtn');
        btn.addEventListener('click', function() {
            // 获取输入值并转为数字
            const num1 = parseFloat(document.getElementById('firstNum').value);
            const num2 = parseFloat(document.getElementById('secondNum').value);

            // 校验输入有效性
            if (isNaN(num1) || isNaN(num2)) {
                alert('请输入有效的数字');
                return;
            }

            const result = num1 + num2;
            alert(`The answer of ${num1} + ${num2} is ${result}.`);
        })
    </script>
</body>
</html>

实现说明 #

• 输入框设置type="number"，原生限制用户输入数字类型，减少非法输入问题
• 输入框默认返回字符串类型值，必须通过parseFloat()/Number()转为数值类型后再计算，否则会出现字符串拼接的错误（例如输入1和2得到12而非3）
• 增加了基础的输入校验，用户未填写内容或输入非法值点击按钮时会给出提示，避免弹出NaN的异常结果

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