javascript中构建计算器时的逻辑中断问题
[英]The problem of breaking logic when building a calculator in javascript
问题描述
我正在使用 java 脚本开发一个计算器，遇到的问题是我可以得到 1 个数字进行数学运算，但我不知道如何得到 2，我需要写第一个数字（例如 4），然后按条件+，第一个数字从字段中删除，但保留在变量中，然后我写2个数字（例如3），我立即在字段中得到结果，即（7），因为4 + 3。如果我的例子不清楚）然后类似的算法在iphone中有一个计算器。 这是我的代码，你能给出什么建议？
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 class="wrapper container mx-auto"> <div class="calc-body" id="calc_body"> <div class="flex flex-wrap p-7 justify-between space-x-2 space-y-6"> <div class="input_field w-full bg-white h-20 mb-8"><input type="text" class="text_input_field w-full h-full" required id="input_field" value=""></div> <div class="main_btn"><button class="btn">1</button></div> <div class="main_btn"><button class="btn">2</button></div> <div class="main_btn"><button class="btn">3</button></div> <div class="main_btn operation"><button class="btn operation">÷</button></div> <div class="main_btn"><button class="btn">4</button></div> <div class="main_btn"><button class="btn">5</button></div> <div class="main_btn"><button class="btn">6</button></div> <div class="main_btn operation"><button class="btn operation">*</div> <div class="main_btn"><button class="btn">7</button></div> <div class="main_btn"><button class="btn">8</button></div> <div class="main_btn"><button class="btn">9</button></div> <div class="main_btn operation"><button class="btn operation">+</div> <div class="main_btn"><button class="btn">0</button></div> <div class="main_btn operation"><button class="btn operation">.</button></div> <div class="main_btn equality"><button class="btn operation">=</button></div> <div class="main_btn operation"><button class="btn operation">-</button></div> </div> </div> </div> <script src="main.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2022-08-17 09:45:21
只需将 append 值添加到文本框，当您单击相等时，只需使用
let calculated_value = eval(document.getElementById("input_field").value)
笔记
使用eval是危险的在这里阅读更多
警告：从字符串执行 JavaScript 是一个巨大的安全风险。 当你使用 eval() 时，坏演员很容易运行任意代码。 请参阅从不使用 eval()。 以下。
构建Javascript计算器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.