计算器运算符与点按钮点击后input值清空问题求助

问题描述 #

开发计算器时，点击+、-、/、*等运算符按钮以及点按钮，input输入框的现有内容会被清空，无法将运算符或小数点追加到已有内容后。

问题原因 #

input元素的type设置为number，这类输入框仅支持合法的数字格式内容。当尝试向其中添加运算符（+、-等）或重复添加小数点时，浏览器判定内容不符合数字格式规范，会自动将input的值重置为空。

解决方案 #

1. 修改input类型为文本类型 #

将HTML中的input标签type属性从number改为text，这样输入框可以接受任意文本内容，不会因格式问题清空值：

<input class="input" type="text" id="input" disabled>

2. 优化JavaScript事件逻辑 #

原代码给所有按钮绑定了点击事件，包括"Answer"和"Reset"按钮，需要过滤这两个按钮，避免误操作；同时简化追加逻辑：

let input = document.querySelector('.input');
let buttons = document.querySelectorAll('button');

buttons.forEach(btn => {
    btn.addEventListener('click', () => {
        // 排除Answer和Reset按钮
        if (btn.id === 'ans' || btn.id === 'clr') return;
        
        // 直接追加按钮文本到输入框
        input.value += btn.innerText;
    });
});

3. 补充Reset按钮功能（可选） #

给Reset按钮单独绑定清空输入框的逻辑：

document.getElementById('clr').addEventListener('click', () => {
    input.value = '';
});

修改后的完整代码 #

HTML #

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>计算器</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="calci.css">
</head>

<body>
    <p id="para"></p>
    <div class='main'>
        <div class="showText">
            <input class="input" type="text" id="input" disabled><br>
        </div>
        <div>
        <div class="buttons">
            <button type="button" id="block1">1</button>
            <button type="button" id="block2">2</button>
            <button type="button" id="block3">3</button>
            <button type="button" id="block4">4</button>
            <button type="button" id="block5">5</button>
            <button type="button" id="block6">6</button>
            <button type="button" id="block7">7</button>
            <button type="button" id="block8">8</button>
            <button type="button" id="block9">9</button>
            <button type="button" id="block0">0</button>
            <button type="button" id="dot" value=".">.</button>
        </div>
        <div class="operators" >
            <button class="add" id="plus" value="+">+</button>
            <button class="substract" id="minus" value="-">-</button>
            <button class="division" id="divide" value="/">/</button>
            <button class="multiply" id="multiply" value="*">*</button>
            <button id="ans">Answer</button>
            <button type="reset" id="clr">Reset</button>
        </div>
        </div>
    </div>
    <script src="calci.js"></script>
</body>

</html>

JavaScript #

let input = document.querySelector('.input');
let buttons = document.querySelectorAll('button');

buttons.forEach(btn => {
    btn.addEventListener('click', () => {
        if (btn.id === 'ans' || btn.id === 'clr') return;
        input.value += btn.innerText;
    });
});

// 绑定Reset按钮功能
document.getElementById('clr').addEventListener('click', () => {
    input.value = '';
});

// 可自行添加Answer按钮的计算逻辑
document.getElementById('ans').addEventListener('click', () => {
    try {
        input.value = eval(input.value);
    } catch (err) {
        input.value = '错误';
    }
});

CSS #

*{
    margin: 0;
    padding: 0;
}

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main {
    text-align: center;
    margin-top: 2rem;
}
input{
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

内容的提问来源于stack exchange，提问作者Md Amir Sohail