CODEWITHSUNDEEP
javascripthtml
AgileMindExec
AgileMindExec

Reputation: 11

My simple calculator is not working. I want to use event listener on button click event

I want to achieve following:

  1. Create a simple calculator that adds, multiplies, subtracts, and divides two numbers.
  2. Three text boxes that contain input number1, input number2, and result respectively
  3. Four buttons, add, subtract, divide, and multiply respectively
  4. Four functions add(), subtract(), multiply(), divide() to perform addition, subtraction, multiplication, and division respectively on the two input numbers.
  5. Each function should display the result in the third(result) textbox.
  6. Add "click" event listeners to all buttons and use the above function names as handlers
  7. Input validation. Inside each handler function use the isNaN() function on textbox values to ensure that the user enters digits and not alphabets or other characters. Display an alert to inform the user.
  8. Ensure that the user does not leave any textbox empty when clicking on any button. Use value="" to ensure this. Display an alert to inform the user.

my not working code is down below:

<html>
    <body>
      
        <h1> Calculator</h1>
        <input type="text" id="textbox1" placeholder="Enter number 1" >
        <input type="text" id="textbox2" placeholder="Enter number 2" >
        <input type="text" id="textbox3" placeholder="Results" ><br><br>
        <input type="button" id="button1" value="Add">
        <input type="button" id="button2" value="Subtract">
        <input type="button" id="button3" value="Multiply">
        <input type="button" id="button4" value="Devide">

        <script>
        
        var button1 = document.getElementById("button1");
        button1.addEventListener("click",add);
        var button2 = document.getElementById("button2");
        button2.addEventListener("click",subtract);
        var button3 = document.getElementById("button3");
        button3.addEventListener("click",multiply);
        var button4 = document.getElementById("button4");
        button4.addEventListener("click",devide);
        function add(){
            var num1 = parseInt(document.getElementById('textbox1').value);
            var num2 = parseInt(document.getElementById('textbox2').value);
            document.getElementById("textbox3").innerHTML = num1 + num2;
        }
        function subtract(){
            var num1 = parseInt(document.getElementById('textbox1').value);
            var num2 = parseInt(document.getElementById('textbox2').value);
            document.getElementById("textbox3").innerHTML = num1 - num2;
        }
        function multiply(){
            var num1 = parseInt(document.getElementById('textbox1').value);
            var num2 = parseInt(document.getElementById('textbox2').value);
            document.getElementById("textbox3").innerHTML = num1 * num2;
        }
        function devide(){
            var num1 = parseInt(document.getElementById('textbox1').value);
            var num2 = parseInt(document.getElementById('textbox2').value);
            document.getElementById("textbox3").innerHTML = num1 / num2;
        }
        </script>
    </body>
</html>

Upvotes: 0

Views: 554

Answers (1)

Joseph Sible-Reinstate Monica
Joseph Sible-Reinstate Monica

Reputation: 48632

Text boxes don't have a meaningful innerHTML. Instead of document.getElementById("...").innerHTML = ..., use document.getElementById("...").value = ....

Upvotes: 2

Related Questions