I am new to Javascript and working on a calculator. How can I get num1, num2 and operators variables

Question

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>

Answer 1

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;
                }
            }
        })