堆栈内存溢出
  简体   繁体   English

如何在javascript计算器中防止多个小数

[英]how to prevent multiple decimals in javascript calculator

 原文  2018-11-04 08:03:06  9   2    javascript/ function/ return-value/ calculator/ document

问题描述

I am making a javascript calculator and have problem with decimals.I need them to output only once.I will show an example with dots (I need 0.55 and code can make 0....5).This code outputs "." 我正在制作一个javascript计算器并且有十进制问题。我需要它们只输出一次。我将显示一个带点的例子（我需要0.55，代码可以使0 .... 5）。这段代码输出“。” right after some number was clicked,after that you can still click on symbol "." 在点击了一些数字之后，您仍然可以点击“。”符号。 and it will write many dots in txtbox.Here is only one part of my code that you need 它会在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

I think your problem is with the conditions (your code considers the dot button as the other buttons and, hence, outputs the "." every time). 我认为您的问题与条件有关（您的代码将点按钮视为其他按钮，因此每次都输出“。” ）。 You should add a condition for the dot button. 您应该为点按钮添加条件。 You may rewrite your code like the following: 您可以重写您的代码，如下所示： 

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
     }
  }
}

Hope this helps. 希望这可以帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 React Calculator：如何防止多个小数？ - React Calculator: How to prevent multiple decimals? 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 Javascript正则表达式多个小数 - Javascript regex multiple decimals Javascript 计算器。 如何停止多个操作数？ - Javascript calculator. How to stop multiple operands? Javascript计算器如何允许多个点 - Javascript calculator how to allow multiple dots 如何在JavaScript中计算小数 - How decimals are calculated in javascript 在计算字段中防止多个小数点 - Prevent multiple decimals points in calculation field 测试计算器的小数字符串 - Testing string for decimals for calculator 如何防止Javascript中的多个按键 - How to prevent a multiple keypresses in Javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM