The problem of breaking logic when building a calculator in javascript-CodePudding

I am developing a calculator using java script and faced with the problem that I can get 1 number for a mathematical operation and I can't figure out how to get 2, I need to write the first number (for example 4), and then press conditional , the first number is erased from the field, but remains in variable, then I write 2 numbers (for example 3) and I immediately have a result in the field, that is (7), because 4 3.If my example is not clear) then a similar algorithm has a calculator in the iphone. Here is my code, what recommendations can you give?

let result = 0;
let num = "";
let operator = "";

document.addEventListener("click", function(event) {
    let target = event.target;
    
    if (target.tagName != "BUTTON") return;

    if (!target.classList.contains("operation")) {
       num  = target.innerHTML;
       num = Number(num)
       input_field.value = Number(num);
    } else {
        operator = target.innerHTML;
        input_field.value = "";
        result = num;
        num = "";
        if (!target.classList.contains("operation")) {
            num  = target.innerHTML;
            num = Number(num)
            input_field.value = Number(num);
            if (operator === " ") {
                result  = num;
                input_field.value = result;           
            }
        }
    }
})

*,
*::before,
*::after {
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
ol,
ul,
li {
    list-style: none;
}

img {
    vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}

html,
body {
    height: 100%;
    line-height: 1;
    
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.calc-body {
    display: block;
    width: 30%;
    height: 70%;
    background-color: rgba(255, 122, 0, 1);
    border-radius: 5%;
}

.input_field {
    border-radius: 50rem;
    color: rgba(188, 186, 186, 1);
    font-family: "Oswald";
    font-weight: 700;
    font-size: 45px;
    display: block;
}

.text_input_filed {
    display: block;
    border-radius: 50rem;
}

.main_btn {
    font-family: "Oswald";
    font-weight: 700;
    font-size: 45px;
    width: 20%;
    height: 20%;
    padding: 0 2% 0 2%;
    background: #766D6D;
    border-radius: 20px;
    color: #fff;
}
.btn {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Calculator</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
    <div >
        <div  id="calc_body">
            <div >
                <div ><input type="text"  required id="input_field" value=""></div>
                
                <div ><button >1</button></div>
                <div ><button >2</button></div>
                <div ><button >3</button></div>
                <div ><button >÷</button></div>

                <div ><button >4</button></div>
                <div ><button >5</button></div>
                <div ><button >6</button></div>
                <div ><button >*</div>

                <div ><button >7</button></div>
                <div ><button >8</button></div>
                <div ><button >9</button></div>
                <div ><button > </div>
                
                
                <div ><button >0</button></div>
                <div ><button >,</button></div>
                <div ><button >=</button></div>
                <div ><button >-</button></div>
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

CodePudding user response：

just append values to the text box and when you click equal, just use

let calculated_value = eval(document.getElementById("input_field").value)

Note

using eval is dangerous read more here

Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval(). See Never use eval()!, below.