如何在javascript計算器中防止多個小數
[英]how to prevent multiple decimals in javascript calculator
問題描述
我正在制作一個javascript計算器並且有十進制問題。我需要它們只輸出一次。我將顯示一個帶點的例子（我需要0.55，代碼可以使0 .... 5）。這段代碼輸出“。” 在點擊了一些數字之后，您仍然可以點擊“。”符號。 它會在txtbox中寫出很多點。這里只是我需要的代碼的一部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
button {
user-select: none;
font-size:23px;
width:80px ;
height: 70px;
font-family:bold;
border-radius: 50%;
border-color: gray;
}
.ope{
background: rgb(96, 250, 199);
}
.num:focus {
background: lime;
}
</style>
</head>
<body>
<input id="txtBox" type="text" style="text-align: right;font-size:60px;width: 325px;height: 125px; font-family: bold;" />
<br />
<button onclick="Click(event)" class="ope">C</button>
<button onclick="Click(event)" class="ope">delete</button>
<button onclick="Click(event)" class="ope">+/-</button>
<button onclick="Click(event)" class="ope">+</button>
<br />
<button onclick="Click(event)" class="num">1</button>
<button onclick="Click(event)" class="num">2</button>
<button onclick="Click(event)" class="num">3</button>
<button onclick="Click(event)" class="ope">-</button>
<br />
<button onclick="Click(event)" class="num">4</button>
<button onclick="Click(event)" class="num">5</button>
<button onclick="Click(event)" class="num">6</button>
<button onclick="Click(event)" class="ope">*</button>
<br />
<button onclick="Click(event)" class="num">7</button>
<button onclick="Click(event)" class="num">8</button>
<button onclick="Click(event)" class="num">9</button>
<button onclick="Click(event)" class="ope">/</button>
<br />
<button onclick="Click(event)" class="num">0</button>
<button onclick="Click(event)" id="ope">.</button>
<button onclick="Click(event)" id="equalto" style="background: rgb(206, 37, 206);user-select: none;font-size:25px; width:160px ; height: 70px; font-family:bold;">=</button>
<script>
var nums = document.getElementById("num")
var operator = document.getElementById("ope")
var textbox = document.getElementById("txtBox")
var counter = 0
function Click(e) {
var but = e.target;
var maxamount = 9;
var dot = 1
if (but.innerText != "=" && but.innerText != "delete") {
textbox.value += but.innerText
if (but.innerText == "C") {
textbox.value = "0"
}
else if (textbox.value[0] == "." || textbox.value[0] == "0" || textbox.value[0] == "+" || textbox.value[0] == "-" || textbox.value[0] == "/" || textbox.value[0] == "*") {
textbox.value = ""
}
else if (textbox.value.length > maxamount) {
textbox.value = textbox.value.substring(0, maxamount)
}
else if (textbox.value.includes == "+/-") {
textbox.value*= -1
}
if (!textbox.value.includes('.') && textbox.value != "") {
textbox.value+="."
}
else{
}
}
else {
textbox.value = eval(textbox.value)
}
if (but.innerText == "delete") {
textbox.value = textbox.value.substring(0, textbox.value.length - 1);
}
if (textbox.value == "NaN" || textbox.value == "undefine") {
textbox.value = ""
}
}
</script>
</body>
</html>
2 個解決方案
解決方案1
2 已采納 2018-11-04 08:22:02
Please try below Click function,
<script>
var nums = document.getElementById("num");
var operator = document.getElementById("ope");
var textbox = document.getElementById("txtBox");
var counter = 0
var dotReset=true;
function Click(e) {
var but = e.target;
var maxamount = 9;
var dot = 1;
if (but.innerText != "=" && but.innerText != "delete") {
if (but.innerText != ".") {
textbox.value += but.innerText;
if (but.innerText == "+" || but.innerText == "-" || but.innerText == "*" || but.innerText == "/"){
dotReset=true;
}
}
if (but.innerText == "C") {
textbox.value = "0";
dotReset=true;
}
else if (textbox.value[0] == "." || textbox.value[0] == "0" || textbox.value[0] == "+" || textbox.value[0] == "-" || textbox.value[0] == "/" || textbox.value[0] == "*") {
textbox.value = "";
dotReset=true;
}
else if (textbox.value.length > maxamount) {
textbox.value = textbox.value.substring(0, maxamount);
}
else if (textbox.value.includes == "+/-") {
textbox.value*= -1;
}
if (but.innerText == ".") {
if(dotReset){
if (textbox.value != "") {
textbox.value+="."
dotReset=false;
}
}
}
}
else {
textbox.value = eval(textbox.value)
}
if (but.innerText == "delete") {
textbox.value = textbox.value.substring(0, textbox.value.length - 1);
}
if (textbox.value == "NaN" || textbox.value == "undefine") {
textbox.value = ""
}
}
</script>
解決方案2
1 2018-11-04 08:37:35
我認為您的問題與條件有關（您的代碼將點按鈕視為其他按鈕，因此每次都輸出“。” ）。 您應該為點按鈕添加條件。 您可以重寫您的代碼，如下所示：
var textbox = document.getElementById("txtBox")
function Click(e) {
var but = e.target;
if (but.innerText != "=" && but.innerText != "delete") {
if (but.innerText == ".") {
if (!textbox.value.includes('.') && textbox.value != "") {
textbox.value += "."
}
}
else{
textbox.value += but.innerText
}
}
}
希望這可以幫助。
javascript計算器選擇多個運算符時如何防止出錯？
[英]How to prevent error when multiple operators chosen in javascript calculator?
連續按下多個運算符時，如何防止計算器運算符修改結果？ JavaScript
[英]How to prevent a calculator operator from modifying the result when multiple operators are pressed in a row? JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.