0

for a simple calculator i have used a form butI cannot get it done I just need help with JS to find out the following: first I need to have the values of variables num1, num2 and operator and second I need to make a function that does the calculation once the user clicks the equal button. please help

<form name="myform">
    <input type="text" name="display" id="input" value=""><br>

    <input class="digit" type="button" value="7" id="7" value="7">
    <input class="digit" type="button" id="8" value="8">
    <input class="digit" type="button" id="9" value="9"><br>

    <input class="digit" type="button" id="4" value="4">
    <input class="digit" type="button" id="5" value="5">
    <input class="digit" type="button" id="6" value="6">
    <input class="digit" type="button" id="1" value="1"><br>
    <input class="digit" type="button" id="2" value="2">
    <input class="digit" type="button" id="3" value="3">
    <input class="digit" type="button" id="0" value="0">
    <input class="digit" type="button" id="." value="."><br>



    <input class="operator" id="opr" type="button" value="+">
    <input class="operator" id="opr" type="button" value="-">
    <input class="operator" id="opr" type="button" value="*">
    <input class="operator" id="opr" type="button" value="/">
    <input class="operator" type="button" value="=">
</form>
<script>
    let numbers =
        document.getElementsByClassName('digit')
    let outPut =
        document.getElementById('input')
    let operator =
        document.getElementsByClassName('operator'
        )

    //this section of the code targets the numbers in 
    for (i = 0; i < numbers.length; i++)
        numbers[i].addEventListener('click', a => {
            var btn = a.target;
            outPut.value += btn.value;
            console.log(outPut.value);
        })
    //this section targets the operator keys
    for (i = 0; i < operator.length; i++)
        operator[i].addEventListener('click', a => {
            var btn = a.target; if (operator.value != "") {
                outPut.value = "";
                num1 = parseInt(outPut.value);
            })
</script>
JBaczuk
  • 13,886
  • 10
  • 58
  • 86
Zahid Hussain Rehan
  • 1
  • Thanks JBaczuk but I wanted to do the calculation with using eval(). Is there a way to do it. I mean I am having trouble to get the following values.1)num1, 2) num2 and then operators value and then a function to manually calculate according to the operator button it can be one of four (+, -, / or *). How can I achieve this. By the way when the users enters the first value for the first time and then clicks the operator button the display shoudl be equal to blank i.e. " " how can i do this. Please help – Zahid Hussain Rehan May 17 '19 at 17:48

1 Answers1

0

A few things, other than that, nice job, I hope you're having fun!

  • Cleanup: You have some unused id's in your html, the only one you're actually using in your javascript is id="input"
  • You should clear the input when the page is refreshed: outPut.value = ""
  • The easiest way to execute what is in the input is to use eval(), but beware, using eval() can open you up to injection attacks in a production app: Why is using the JavaScript eval function a bad idea?
  • You are checking operator.value but should be checking btn.value in your last function
<form name="myform">
    <input type="text" name="display" id="input" value=""><br>

    <input class="digit" type="button" value="7">
    <input class="digit" type="button" value="8">
    <input class="digit" type="button" value="9"><br>

    <input class="digit" type="button" value="4">
    <input class="digit" type="button" value="5">
    <input class="digit" type="button" value="6">
    <input class="digit" type="button" value="1"><br>
    <input class="digit" type="button" value="2">
    <input class="digit" type="button" value="3">
    <input class="digit" type="button" value="0">
    <input class="digit" type="button" value="."><br>



    <input class="operator" type="button" value="+">
    <input class="operator" type="button" value="-">
    <input class="operator" type="button" value="*">
    <input class="operator" type="button" value="/">
    <input class="operator" type="button" value="=">
</form>
<script>
    let numbers = document.getElementsByClassName('digit')
    let outPut = document.getElementById('input')
    let operator = document.getElementsByClassName('operator')

    outPut.value = ""

    //this section of the code targets the numbers in 
    for (i = 0; i < numbers.length; i++)
        numbers[i].addEventListener('click', a => {
            var btn = a.target;
            outPut.value += btn.value;
            console.log(outPut.value);
        })

    //this section targets the operator keys
    for (i = 0; i < operator.length; i++)
        operator[i].addEventListener('click', a => {
            var btn = a.target;
            if (btn.value !== "=") {
                outPut.value += btn.value;
                num1 = parseInt(outPut.value);
            } else {
                outPut.value = eval(outPut.value)
            }
        })
</script>

Update: to avoid using eval() you can do something like (note this doesn't handle decimals):


    outPut.value = ""
    let num1 = 0
    let op = ""
    let num2 = 0

    //this section of the code targets the numbers in 
    for (i = 0; i < numbers.length; i++)
        numbers[i].addEventListener('click', a => {
            var btn = a.target;
            outPut.value += btn.value;
            if (op === "") {
                num1 = parseInt(btn.value);
            } else {
                num2 = parseInt(btn.value);
            }
            console.log(outPut.value);
        })

    //this section targets the operator keys
    for (i = 0; i < operator.length; i++)
        operator[i].addEventListener('click', a => {
            var btn = a.target;
            if (btn.value !== "=") {
                outPut.value += btn.value;
                op = btn.value;
            } else {
                if (op === "+") {
                    outPut.value = num1 + num2;
                } else if (op === '-') {
                    outPut.value = num1 - num2;
                } else if (op === '*') {
                    outPut.value = num1 * num2;
                } else if (op === '/') {
                    outPut.value = num1 / num2;
                }
            }
        })
JBaczuk
  • 13,886
  • 10
  • 58
  • 86
  • Thanks for the suggestion but honestly I want to do the calculation without using eval() and that is where I cannot take it further because to be able to do this I need three values. 1) I need to have the first value as num1 when after the number (s) key the user presses an operator 2) the value of the operator key which was used by the user 3)current value which the user enters after the operator key and finally 4) make a function which does the manual calculation with certain conditions for different operators. I really need help with my code. please someone reply. – Zahid Hussain Rehan May 17 '19 at 17:27
  • just store them to three variables and do an if statement on the operator when equals is pressed. – JBaczuk May 17 '19 at 18:48
  • I tried the example but there seems to be a problem. It does the calculation for the first time however the second time it does not run correctly. I am working on it and looking forward for a better way out from your side. Please do reply – Zahid Hussain Rehan May 18 '19 at 10:19
  • Just refresh the page. – JBaczuk May 18 '19 at 13:36
  • Thanks I am still working on it to make it fully functional without the refresh button. The problem is that when i enter a two digit or three digit number it only calculates the first digits i.e. it concatenates both numbers as strings but not as integers. Any solution on that Please if you would help me to resolve the problem with this and with the decimal sign and the refresh issue ti will be great! – – Zahid Hussain Rehan May 20 '19 at 12:49
  • If you have specific questions about how to code something, you should split them into different questions. The original question of this post wasn't "will someone code a calculator for me" :). Check out https://stackoverflow.com/help/how-to-ask – JBaczuk May 20 '19 at 12:58