how to get text or operator inside button and set it in input field-CodePudding

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 >
            <input  type="number" id="input" disabled><br>
        </div>
        <div>
        <div >
            <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  >
            <button  id="plus" value=" "> </button>
            <button  id="minus" value="-">-</button>
            <button  id="divide" value="/">/</button>
            <button  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;
}

CodePudding user response：

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 >
            <input  type="text" id="input" disabled><br>
        </div>
        <div>
        <div >
            <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  >
            <button  id="plus" value=" "> </button>
            <button  id="minus" value="-">-</button>
            <button  id="divide" value="/">/</button>
            <button  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>