如何用JavaScript实现多选框计算器在页面同时显示多个计算结果？

问题1：无法同时显示多个计算结果 #

原因：

• 除除法外，其他运算使用innerHTML =赋值，会直接覆盖之前的结果
• msg变量在循环外初始化，每次循环会持续累加内容，导致输出混乱

问题2：加法、乘法、减法无结果输出 #

原因：

• 乘法checkbox的value是mult，但JS判断条件写的是val == 'mul'，字符串不匹配导致乘法逻辑不触发
• 非除法运算的输出逻辑被覆盖或条件不匹配，导致控制台无输出

修正后的完整代码 #

<!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>Building Calculator Using Checkbox</title>
</head>
<body>
    <form name="f" id="f1">
        <table>
            <tr>
                <td>Enter Value 1 :</td>
                <td><input type="text" name="n1"></td>
            </tr>
            <tr>
                <td>Enter Value 2 :</td>
                <td><input type="text" name="n2"></td>
            </tr>
            <tr>
                <td>Choose Any Option :-</td>
                <td>
                    <input type="checkbox" name="v" value="div">Division(/)
                    <br>
                    <input type="checkbox" name="v" value="mult">Multiplication(*)
                    <br>
                    <input type="checkbox" name="v" value="add">Addition(+)
                    <br>
                    <input type="checkbox" name="v" value="sub">Subtraction(-)
                </td>
            </tr>
            <tr>
                <td><input type="button" value="Answer" onclick="show()"></td>
            </tr>
            <tr>
                <td><p id="p1"></p></td>
            </tr>
        </table>
    </form>
    <script>
        function show(){
            let n1 = parseInt(document.f.n1.value);
            let n2 = parseInt(document.f.n2.value);
            // 每次计算前清空结果区域，避免旧结果残留
            document.getElementById('p1').innerHTML = '';
            let call = document.f;
            
            for(let i=0;i<call.v.length;i++){
                if(call.v[i].checked){    
                    let val = call.v[i].value;
                    let msg = "The Answer of ";
                    let ans;

                    switch(val){
                        case 'div':
                            ans = n1 / n2;
                            msg += "Division : " + ans;
                            break;
                        case 'mult':
                            ans = n1 * n2;
                            msg += "Multiplication : " + ans;
                            break;
                        case 'add':
                            ans = n1 + n2;
                            msg += "Addition : " + ans;
                            break;
                        case 'sub':
                            ans = n1 - n2;
                            msg += "Subtraction : " + ans;
                            break;
                    }
                    console.log(val, ans);
                    // 追加结果并换行区分
                    document.getElementById('p1').innerHTML += msg + '<br>';
                }
            }
        }
    </script>
</body>
</html>

关键修改点说明 #

1. 修复乘法匹配问题：将判断条件中的'mul'改为'mult'，与checkbox的value保持一致
2. 统一结果输出方式：所有运算都使用innerHTML +=，并添加<br>实现换行，避免结果重叠
3. 重置结果区域：每次点击按钮时先清空p1内容，防止多次点击后结果重复累积
4. 局部初始化msg变量：将msg放在循环内部，确保每个运算的提示文本独立，不会累加混乱
5. 优化逻辑结构：用switch替代多个if，代码更清晰易维护

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