CODEWITHSUNDEEP
javascripthtmlcsscalculator
Feriha
Feriha

Reputation: 33

How do I delete a single sigit in calculator using html and js?

<html> 
<head> 
    <script>  
        function dis(val) 
        { 
            document.getElementById("result").value+=val 
        } 
        
        //function that evaluates the digit and return result 
        function solve() 
        { 
            let x = document.getElementById("result").value 
            let y = eval(x) 
            document.getElementById("result").value = y 
        } 
        
        //function that clear the display 
        function clr() 
        { 
            document.getElementById("result").value = "" 
        } 
                
    </script> 
</head> 
<body> 
    <div class = title >GeeksforGeeks Calculator</div> 
    <table border="1"> 
        <tr> 
            <td colspan="3"><input type="text" id="result"/></td> 
            <!-- clr() function will call clr to clear all value -->
            <td><input type="button" value="c" onclick="clr()"/> </td> 
                        
        </tr> 
        <tr> 
            <!-- create button and assign value to each button -->
            <!-- dis("1") will call function dis to display value -->
            <td><input type="button" value="1" onclick="dis('1')"/> </td> 
            <td><input type="button" value="2" onclick="dis('2')"/> </td> 
            <td><input type="button" value="3" onclick="dis('3')"/> </td> 
            <td><input type="button" value="/" onclick="dis('/')"/> </td> 
        </tr> 
        <tr> 
            <td><input type="button" value="4" onclick="dis('4')"/> </td> 
            <td><input type="button" value="5" onclick="dis('5')"/> </td> 
            <td><input type="button" value="6" onclick="dis('6')"/> </td> 
            <td><input type="button" value="-" onclick="dis('-')"/> </td> 
        </tr> 
        <tr> 
            <td><input type="button" value="7" onclick="dis('7')"/> </td> 
            <td><input type="button" value="8" onclick="dis('8')"/> </td> 
            <td><input type="button" value="9" onclick="dis('9')"/> </td> 
            <td><input type="button" value="+" onclick="dis('+')"/> </td> 
        </tr> 
        <tr> 
            <td><input type="button" value="." onclick="dis('.')"/> </td> 
            <td><input type="button" value="0" onclick="dis('0')"/> </td> 
            <!-- solve function call function solve to evaluate value -->
            <td><input type="button" value="=" onclick="solve()"/>  </td> 
            <td><input type="button" value="*" onclick="dis('*')"/> </td> 
        </tr> 
    </table> 
</body> 
</html>

I wanted to delete a single digit(last entered digit) rather than the clearing the whole. The code consists of html and javsript. I am confused about how to clear a single digit because my code clears the whole of it. How do I make this change using substring in onclick?

Upvotes: 2

Views: 2898

Answers (1)

Spectric
Spectric

Reputation: 31992

Your input id is result, not res. Also, use .substring(0, value.length-1) to get the value without the last character.

<html>

<head>
  <script>
    function dis(val) {
      document.getElementById("result").value += val
    }

    //function that evaluates the digit and return result 
    function solve() {
      let x = document.getElementById("result").value
      let y = eval(x)
      document.getElementById("result").value = y
    }

    //function that clear the display 
    function clr() {
      document.getElementById("result").value = ""
    }

    function del() {
      var input = document.getElementById("result");
      input.value = input.value.substring(0, input.value.length - 1);
    }
  </script>
</head>

<body>
  <div class=t itle>GeeksforGeeks Calculator</div>
  <table border="1">
    <tr>
      <td colspan="3"><input type="text" id="result" /></td>
      <!-- clr() function will call clr to clear all value -->
      <td><input type="button" value="c" onclick="clr()" /> </td>
      <td><input type="button" value="del" onclick="del()" /> </td>
    </tr>
    <tr>
      <!-- create button and assign value to each button -->
      <!-- dis("1") will call function dis to display value -->
      <td><input type="button" value="1" onclick="dis('1')" /> </td>
      <td><input type="button" value="2" onclick="dis('2')" /> </td>
      <td><input type="button" value="3" onclick="dis('3')" /> </td>
      <td><input type="button" value="/" onclick="dis('/')" /> </td>
    </tr>
    <tr>
      <td><input type="button" value="4" onclick="dis('4')" /> </td>
      <td><input type="button" value="5" onclick="dis('5')" /> </td>
      <td><input type="button" value="6" onclick="dis('6')" /> </td>
      <td><input type="button" value="-" onclick="dis('-')" /> </td>
    </tr>
    <tr>
      <td><input type="button" value="7" onclick="dis('7')" /> </td>
      <td><input type="button" value="8" onclick="dis('8')" /> </td>
      <td><input type="button" value="9" onclick="dis('9')" /> </td>
      <td><input type="button" value="+" onclick="dis('+')" /> </td>
    </tr>
    <tr>
      <td><input type="button" value="." onclick="dis('.')" /> </td>
      <td><input type="button" value="0" onclick="dis('0')" /> </td>
      <!-- solve function call function solve to evaluate value -->
      <td><input type="button" value="=" onclick="solve()" /> </td>
      <td><input type="button" value="*" onclick="dis('*')" /> </td>
    </tr>
  </table>
</body>

</html>

Upvotes: 1

Related Questions