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是id="input"
刷新页面时，您应该清除输入：outPut.value = ""
执行输入中内容的最简单方法是使用eval()，但是请注意，使用eval()可以使您容易受到生产应用程序Why is using the JavaScript eval function a bad idea?中的注入攻击的攻击
您正在检查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;
                }
            }
        })

我是Java语言的新手，正在从事计算器工作。如何获取num1，num2和运算符变量

1 个答案: