我是Javascript的新手，正在研究計算器。 如何獲取num1，num2和運算符變量

Question

對於一個簡單的計算器我已經使用了一個表單但是我無法完成它我只需要JS的幫助就可以找到以下內容：首先我需要有變量num1，num2和operator的值，然后我需要創建一個函數來做用戶單擊相等按鈕后的計算。 請幫忙

<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

一些事情，除此之外，干得好，我希望你玩得開心！

• 清理：你的html中有一些未使用的id，你在javascript中實際使用的唯一一個是id="input"
• 刷新頁面時應清除輸入： outPut.value = ""
• 執行輸入中最簡單的方法是使用eval() ，但要注意，使用eval()可以在生產應用程序中打開注入攻擊： 為什么使用JavaScript eval函數是個壞主意？
• 您正在檢查operator.value但應檢查上一個函數中的btn.value

<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>

更新 ：為了避免使用eval()你可以做類似的事情（注意這不處理小數）：

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