Hi i am trying to create a calculator but when i am clicking on any operator button like +,-,/,* and on dot button it does not getting added to my input. also when i clicked on these buttons whole input tag value got erased. how to fix it please help me with that.

<!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="number" 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 starts here:

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

for(let btn of button){
    btn.addEventListener('click',()=>{
      if(input.value == ""){
        input.value = (btn.innerText);
      }
      else if(input.value != "" ){
        input.value += btn.innerText;
      }
    })
}

CSS starts here:

*{
    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;
}

推荐答案

Because the input type is number, it should be text to accept the special characters.

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

for(let btn of button){
    btn.addEventListener('click', ()=>{
        console.log(btn.textContent)
        input.value += btn.textContent;
    })
}
*{
    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;
}
<!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相关问答推荐

React Router Dom v6,useNavigate 不重定向到正确的 url 路径

如何在一个 Html 页面中使用不同的 swiperJS

悬停时旋转图像失败

在 bootstrap 程序中自定义导航选项卡

如何在.Net中使用c#在不打开的情况下下载jsreport

可以在不编辑 launch.json 的情况下调试 VSCode 中的当前选项卡吗?

代理真的可以提供对类的私有字段的访问吗?

如何按顺序对数组中的数据进行排序,因为它们显示为完全匹配?

FlatList 不显示数据,屏幕不断加载

如何在 React 中对数组的每个元素进行切片

NextJS 水合错误(文本内容与服务器呈现的 HTML 不匹配.)

Discord.js:如何从数组中获取所有内容,然后使用数组的每个部分并分别对消息做出react ?

优化 if 条件语句

将多个对象字段与JS中的输入值匹配

zoom 时有趣的 Css 渲染问题:浏览器在zoom 时渲染容器之间的空间间隙,发生在每个浏览器中,但在 Firefox 中没有

通过接受文件作为 Blob 并需要多部分表单数据的 API 在 Angular 中上传文件

ctx.stroke() 和 ctx.fill() 会自动关闭画布中的路径吗?

Javascript,显示 blob 图像

关闭按钮未显示在 Bootstrap 可关闭alert 上,但功能正常

如何有条件地在 Angular Reactive Form 中设置 [disabled] 属性值?