JavaScript 计算器等号按钮返回“未定义”

Question

I'm working on a simple JavaScript calculator.我正在研究一个简单的 JavaScript 计算器。 Everything seems fine and other buttons works as expected except for the equal button which returns an "undefined" when it is clicked.一切似乎都很好，其他按钮按预期工作，除了单击它时返回“未定义”的相等按钮。 On clicking the equal button, "if" the value of the screen is empty, I want the value of the screen to be set to an empty string, else, the new screen.value should be the result of an eval();单击相等按钮时，“如果”屏幕的值为空，我希望将屏幕的值设置为空字符串，否则，新的 screen.value 应该是 eval(); 的结果； I've gone over the code several times and can't find what the problem is.我已经检查了几次代码，但找不到问题所在。 Pls help.请帮忙。 Thanks.谢谢。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
    <div class="wrapper">
        <form>
            <input type="text" class="screen" placeholder="0" value="";>
        </form>

        <div class="buttons">
            <button type="button" class="btn btn-yellow" data-num="*">*</button>
            <button type="button" class="btn btn-yellow" data-num="/">/</button>
            <button type="button" class="btn btn-yellow" data-num="-">-</button>
            <button type="button" class="btn btn-yellow" data-num="+">+</button>

            <button type="button" class="btn btn-grey" data-num="9">9</button>
            <button type="button" class="btn btn-grey" data-num="8">8</button>
            <button type="button" class="btn btn-grey" data-num="7">7</button>
            <button type="button" class="btn btn-grey" data-num="6">6</button>
            <button type="button" class="btn btn-grey" data-num="5">5</button>
            <button type="button" class="btn btn-grey" data-num="4">4</button>
            <button type="button" class="btn btn-grey" data-num="3">3</button>
            <button type="button" class="btn btn-grey" data-num="2">2</button>
            <button type="button" class="btn btn-grey" data-num="1">1</button>
            <button type="button" class="btn btn-grey" data-num="0">0</button>
            <button type="button" class="btn btn-grey" data-num=".">.</button>

            <button type="button" class="btn btn-equal">=</button>
            <button type="button" class="btn btn-clear">C</button>
            
        </div>


    </div>
        

<script type="text/javascript" src="calculator.js"></script>

</body>
</html>

JAVASCRIPT CODE HERE

(function(){

    let screen = document.querySelector(".screen");
    let buttons = document.querySelectorAll(".btn");
    let equal = document.querySelector(".btn-equal");
    let clear = document.querySelector(".btn-clear");

    buttons.forEach(function(button) {
        button.addEventListener("click", function(e){
            let value = e.target.dataset.num;
            screen.value += value;
        })
    });
    
    equal.addEventListener("click", function(e){
       if (screen.value === "") {
          screen.value = "";
        } else{
            let answer = eval(screen.value); 
            screen.value = answer;
        } 
    })

    clear.addEventListener("click", function(){
        screen.value = "";
    })


})();

Answer 1

The issue because you give the "=" button a ".btn" class, which has the 'click' event listener, and because the "=" button doesn't have attribute data-num, the input will be concatenate with undefined, so any calculation you will do will be end with "undefined" which give Syntax error.问题是因为你给“=”按钮一个“.btn”类，它有'click'事件监听器，并且因为“=”按钮没有属性data-num，输入将与未定义连接，因此，您将执行的任何计算都将以“未定义”结束，这会产生语法错误。

So just removing "btn" class from "=" button will solve the issue.因此，只需从“=”按钮中删除“btn”类即可解决问题。

This works, please check.这有效，请检查。

 (function(){ let screen = document.querySelector(".screen"); let buttons = document.querySelectorAll(".btn"); let equal = document.querySelector(".btn-equal"); let clear = document.querySelector(".btn-clear"); buttons.forEach(function(button) { button.addEventListener("click", function(e){ let value = e.target.dataset.num; console.log(value) screen.value += value; }) }); equal.addEventListener("click", function(e){ if (screen.value === "") { screen.value = ""; } else{ console.log(screen.value) let answer = eval(screen.value); screen.value = answer; } }) clear.addEventListener("click", function(){ screen.value = ""; }) })();

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="calculator.css"> </head> <body> <div class="wrapper"> <form> <input type="text" class="screen" placeholder="0" value="";> </form> <div class="buttons"> <button type="button" class="btn btn-yellow" data-num="*">*</button> <button type="button" class="btn btn-yellow" data-num="/">/</button> <button type="button" class="btn btn-yellow" data-num="-">-</button> <button type="button" class="btn btn-yellow" data-num="+">+</button> <button type="button" class="btn btn-grey" data-num="9">9</button> <button type="button" class="btn btn-grey" data-num="8">8</button> <button type="button" class="btn btn-grey" data-num="7">7</button> <button type="button" class="btn btn-grey" data-num="6">6</button> <button type="button" class="btn btn-grey" data-num="5">5</button> <button type="button" class="btn btn-grey" data-num="4">4</button> <button type="button" class="btn btn-grey" data-num="3">3</button> <button type="button" class="btn btn-grey" data-num="2">2</button> <button type="button" class="btn btn-grey" data-num="1">1</button> <button type="button" class="btn btn-grey" data-num="0">0</button> <button type="button" class="btn btn-grey" data-num=".">.</button> <button type="button" class="btn-equal">=</button> <button type="button" class="btn btn-clear">C</button> </div> </div> </body> </html>

Answer 2

 (function(){ let screen = document.querySelector(".screen"); let buttons = document.querySelectorAll(".btn"); let equal = document.querySelector(".btn-equal"); let clear = document.querySelector(".btn-clear"); buttons.forEach(function(button) { button.addEventListener("click", function(e){ let value = e.target.dataset.num; console.log(value) screen.value += value; }) }); equal.addEventListener("click", function(e){ if (screen.value === "") { screen.value = ""; } else{ console.log(screen.value) let answer = eval(screen.value); screen.value = answer; } }) clear.addEventListener("click", function(){ screen.value = ""; }) })();

 <.DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="calculator;css"> </head> <body> <div class="wrapper"> <form> <input type="text" class="screen" placeholder="0" value="".> </form> <div class="buttons"> <button type="button" class="btn btn-yellow" data-num="*">*</button> <button type="button" class="btn btn-yellow" data-num="/">/</button> <button type="button" class="btn btn-yellow" data-num="-">-</button> <button type="button" class="btn btn-yellow" data-num="+">+</button> <button type="button" class="btn btn-grey" data-num="9">9</button> <button type="button" class="btn btn-grey" data-num="8">8</button> <button type="button" class="btn btn-grey" data-num="7">7</button> <button type="button" class="btn btn-grey" data-num="6">6</button> <button type="button" class="btn btn-grey" data-num="5">5</button> <button type="button" class="btn btn-grey" data-num="4">4</button> <button type="button" class="btn btn-grey" data-num="3">3</button> <button type="button" class="btn btn-grey" data-num="2">2</button> <button type="button" class="btn btn-grey" data-num="1">1</button> <button type="button" class="btn btn-grey" data-num="0">0</button> <button type="button" class="btn btn-grey" data-num="."> </button> <button type="button" class="btn-equal">=</button> <button type="button" class="btn btn-clear">C</button> </div> </div> </body> </html>

i have been having similar issue on this script, i still need to copy this script but still saying undefine on equal when i calculate while others are working fine.我在这个脚本上遇到了类似的问题，我仍然需要复制这个脚本，但是当我计算时仍然说 undefine on equal 而其他人工作正常。 please any help?请帮忙？

JavaScript 计算器等号按钮返回“未定义”

问题描述

1 个解决方案

解决方案1
2 2022-06-20 21:23:22

解决方案2
-2 2022-08-01 18:41:45

JavaScript 计算器等号按钮返回“未定义”

问题描述

1 个解决方案

解决方案1 2 2022-06-20 21:23:22

解决方案2 -2 2022-08-01 18:41:45

解决方案1
2 2022-06-20 21:23:22

解决方案2
-2 2022-08-01 18:41:45