计算器开发问题：Operand无法在输出界面显示

核心问题分析 #

1. 操作符按钮未绑定交互逻辑：HTML中的加减乘除按钮既没有添加onclick触发事件，也未设置value属性，点击时无法传递操作符值到store函数。
2. 错误调用数组方法：operand是字符串变量，却使用了数组的join()方法，这会直接抛出错误，导致页面无法更新显示。
3. JS文件引入方式错误：用引入CSS的<link>标签加载JS文件，脚本根本不会被浏览器执行。

修正后的代码 #

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="cal.css">
    <title>Calculator</title>
</head>
<body>
    <div class="container">
        <div class="number_Btn">
            <div class="numbering">
                <div class="three">
                    <button value="7" class="num" onclick="store(this)">7</button>
                    <button value="8" class="num" onclick="store(this)">8</button>
                    <button value="9" class="num" onclick="store(this)">9</button>
                </div>
                <div class="six">
                    <button value="4" class="num" onclick="store(this)">4</button>
                    <button value="5" class="num" onclick="store(this)">5</button>
                    <button value="6" class="num" onclick="store(this)">6</button>
                </div>
                <div class="nine">
                    <button value="1" class="num" onclick="store(this)">1</button> 
                    <button value="2" class="num" onclick="store(this)">2</button>
                    <button value="3" id="thr" class="num" onclick="store(this)">3</button>
                </div>
                <div class="zero">
                    <button value ="0" class="num" onclick="store(this)">0</button>
                    <button value ="=" class="num" onclick="store(this)">=</button>
                </div>
            </div>
            <div class="ope">
                <button class="operators" value="+" onclick="store(this)">+</button>
                <button class="operators" value="-" onclick="store(this)">-</button>
                <button class="operators" value="*" onclick="store(this)">*</button>
                <button class="operators" value="/" onclick="store(this)">/</button>
            </div>
        </div>
        <div class="display">
            <p id="demo">display</p>
        </div>
    </div>
    <script src="cal.js"></script>
</body>
</html>

JavaScript 代码

var operand = "";
function store(button) {
    if (["+", "-", "*", "/"].includes(button.value)) {
        operand = button.value;
    }
    document.getElementById("demo").innerHTML = operand;
}

CSS 代码（保留原代码）

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.num{
    width: 50px;
    height: 35px;
    text-align: center;
}
.number_Btn{
    width: 16%;
    height: 300px;
    border: 2px solid black;
    display: flex;
    align-items: flex-end;
}
.zero{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ope{
    display: flex;
    flex-direction: column;
    width: 20%;
    height: 140px;
}
.operators{
     width: 50px;
    height: 35px;
    text-align: center;
    margin-left: 5px;        
}
.display{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.display p {
    margin: 0;
}

额外优化提示 #

如果需要实现完整的计算器输入逻辑（比如显示连续数字与操作符、执行计算），可以修改JS逻辑：

var operand = "";
function store(button) {
    if (button.value === "=") {
        try {
            operand = eval(operand).toString();
        } catch(e) {
            operand = "Error";
        }
    } else {
        operand += button.value;
    }
    document.getElementById("demo").innerHTML = operand;
}

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