JavaScript 计算器等号按钮返回“未定义”
[英]JavaScript Calculator equal button returns "undefined"
问题描述
我正在研究一个简单的 JavaScript 计算器。 一切似乎都很好，其他按钮按预期工作，除了单击它时返回“未定义”的相等按钮。 单击相等按钮时，“如果”屏幕的值为空，我希望将屏幕的值设置为空字符串，否则，新的 screen.value 应该是 eval(); 的结果； 我已经检查了几次代码，但找不到问题所在。 请帮忙。 谢谢。
<!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 = "";
})
})();
1 个解决方案
解决方案1
2 2022-06-20 21:23:22
问题是因为你给“=”按钮一个“.btn”类，它有'click'事件监听器，并且因为“=”按钮没有属性data-num，输入将与未定义连接，因此，您将执行的任何计算都将以“未定义”结束，这会产生语法错误。
因此，只需从“=”按钮中删除“btn”类即可解决问题。
这有效，请检查。
(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>
解决方案2
-2 2022-08-01 18:41:45
(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>
我在这个脚本上遇到了类似的问题，我仍然需要复制这个脚本，但是当我计算时仍然说 undefine on equal 而其他人工作正常。 请帮忙？
带有一些按钮的计算器 JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.