如何将prompt替换为input元素实现网页计算器

直接给你修改后的完整代码，以及关键注意事项，帮你解决之前获取input值出错的问题：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页计算器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calc-group">
        <input type="number" id="firstNum" placeholder="输入第一个数字">
        <input type="number" id="secondNum" placeholder="输入第二个数字">
        <select id="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
    </div>
    <button id="btn">计算结果</button>
    <h1 id="answer"></h1>
    <script src="calculator.js"></script>
</body>
</html>

修改后的JavaScript代码 #

const btn = document.getElementById("btn");
const answerEl = document.getElementById("answer");

btn.onclick = () => {
    // 点击按钮时才获取输入框的值，避免页面加载时获取空值
    const firstNumber = parseFloat(document.getElementById("firstNum").value);
    const secondNumber = parseFloat(document.getElementById("secondNum").value);
    const operator = document.getElementById("operator").value;

    // 验证输入有效性
    if (isNaN(firstNumber) || isNaN(secondNumber)) {
        answerEl.innerHTML = "请输入有效的数字";
        return;
    }

    // 执行计算逻辑
    let result;
    switch(operator) {
        case "+":
            result = firstNumber + secondNumber;
            break;
        case "-":
            result = firstNumber - secondNumber;
            break;
        case "*":
            result = firstNumber * secondNumber;
            break;
        case "/":
            // 处理除数为0的异常情况
            if (secondNumber === 0) {
                answerEl.innerHTML = "除数不能为0";
                return;
            }
            result = firstNumber / secondNumber;
            break;
        default:
            answerEl.innerHTML = "请选择有效的运算符";
            return;
    }

    answerEl.innerHTML = `结果：${result}`;
};

核心注意点 #

1. 获取值的时机：必须在点击按钮时才读取input的值，不能在页面初始化时就获取（此时输入框为空，会得到NaN）。
2. 类型转换：输入框的值默认是字符串类型，必须用parseFloat或parseInt转为数字，否则会触发字符串拼接而非数值计算。
3. 输入验证：添加isNaN检查，判断输入是否为有效数字，同时处理除数为0的特殊场景，避免报错。
4. 运算符优化：用<select>代替手动输入运算符，减少用户输入错误的概率，交互更友好。

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