使用.split创建文本框计算器

编程问答 2022-08-16

问题描述

我正在使用JS编写文本框计算器的代码。我想在理论上制造的计算器应该像这样

        for (var i = 0; i < x.length; i++) { //x being an input for the calculator
            if (x[i] == "+")
            o = "+";  // o is the symbol for the equaction 
            var l = x.split(o); 
            var opf = parseFloat(l[0]) + parseFloat(l[1]); 
            }

它没有提示我错误，但这是消息的代码

            if (opf !== opf) {                      //number error
        
                opf = "Error" 
            }

它不起作用，有人知道原因以及如何修复它。

解决方法

结果证明我是个白痴，并且还有第二个代码也在计算中，由于该代码是首先计算的，因此它没有打印出来，但是现在它是固定的，如果您要用的是我的整个代码。

<html>

    <script> 

        function cal() {
            var opf = " ";
            var l = " "; 
            var o = " "; 
            var x = document.getElementById("op").value; //This is operation
            

            for (var i = 0; i < x.length; i++) {
        
                if (x[i] == "+") {
                    o = "+"
                    l = x.split(o);
                    opf = parseFloat(l[0]) + parseFloat(l[1]);
                }
            
                else if (x[i] == "-") {
                    o = "-";
                    l = x.split(o); 
                    opf = parseFloat(l[0]) - parseFloat(l[1]);
                }
            
                else if (x[i] == "*") {
                    o = "*";
                    l = x.split(o); 
                    opf = parseFloat(l[0]) * parseFloat(l[1]);
                }
            
                else if (x[i] == "x") {
                    o = "*";
                    l = x.split(o); 
                    opf = parseFloat(l[0]) * parseFloat(l[1]);
                }
            
                else if (x[i] == "/") {
                    o = "/";
                    l = x.split(o); 
                    opf = parseFloat(l[0]) / parseFloat(l[1]);
                }
            
                else if (x[i] == "^") { 
                    o = "^";
                    l = x.split(o);
                    opf = Math.pow(parseFloat(l[0]),parseFloat(l[1]));
                }   
            
                else if (x[i] == "%") {
                    o = "%";
                    l = x.split(o);
                    opf = (parseFloat(l[0]/100)) * parseFloat(l[1]);
                }   
            
                else if (x[i] = "=" ) {
                    o = "=";
                    l = x.split(o); 
                    
                    if (l[0] === l[1]) {
                        opf = l[0];
                    }
                }
            
            }

                if (opf !== opf) {                      //number error
                    opf = "Error" 
                }



                document.getElementById("result").innerHTML = opf; 
                            } // end of function to calculate

    </script>
        <style>
            .footer { 
                position: fixed;     
                text-align: left;    
                bottom: 0px; 
                width: 100%;
                font-size: 10px;
                        }  
                        
        </style>
        
        <style> 
            .button {
                background-color: red;
                border-width: 1.25px;
                border-color: darkred; 
                border-style: dotted;
                color: black;
                padding: 1px px;
                text-align: center;
                font-size: 16px;
                margin: 4px 2px;
                cursor: pointer;
                opacity: 1;
                                }
        </style>   
    <body>
        <h1 style="color:red">  
            <b>  Calculator  </b>  
                <br>  
        </h1>    
Equation: 
    <input type="text" id="op"  autocomplete = "off"/>  
                <br>  <br> 
            <input type = "button"  class = "button" value = "Calculate" onClick = "cal()"> <br> <br> 
            <p1>
Solution: 
                <br>
                    <p id="result" name="r1" style = "color:black" "font:bold" >
                </p> 
            </p1>
        <body>
            <div class="footer">Calculates Equations </div>
        </body>
    </body>
</html>
calculatorjavascriptsplitsplitsplit