【问题标题】:how to prevent multiple decimals in javascript calculator如何防止javascript计算器中的多个小数
【发布时间】:2018-11-04 08:03:06
【问题描述】:

我正在制作一个 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>

【问题讨论】:

  • 目前尚不清楚您上面的示例将如何不断添加点 (.)。这可能是您每次获取文本框和值的方式。我们需要查看更多代码——可能是按钮 + 文本框的 HTML 以及更多的 javascript 代码
  • @Prescott 如果你需要完整的代码,我刚刚编辑过你可以看看

标签: javascript function return-value calculator document


【解决方案1】:

我认为您的问题在于条件(您的代码将 dot 按钮视为其他按钮,因此每次都输出 ".")。您应该为 dot 按钮添加一个条件。你可以像下面这样重写你的代码:

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

希望这会有所帮助。

【讨论】:

  • 感谢您抽空帮助我,但现在它开始输出双点((如果您需要我编辑了我的代码并显示了所有内容
【解决方案2】:
  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>

【讨论】:

  • 感谢您的指点,但是这两个场景都没有输出((如果您需要完整的代码,我只是编辑了之前的代码。您可以看看它。
  • 它输出数字,但您仍然可以添加任意数量的点。它仍然无法阻止它。但是感谢您的尝试
  • 非常感谢,真的很管用。就一个问题,有没有可能不只为“。”但对于所有操作?只是问问。
  • 有可能,只需要一点点努力。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-29
  • 2014-04-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多