Javascript / HTML计算器，需要其他方法来获得结果

Question

我在中学，现在我们学习HTML和JavaScript。 我正在制作一个计算器（在互联网的帮助下），我找到了eval（）函数。 我们基本上没有学到这一点，所以我需要将其改为其他东西。 这是我的计算器的代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Számológép</title> </head> <body> <script> function beker(szam) { document.szamologep.eredmeny.value = document.szamologep.eredmeny.value + szam; } function szamol() { var a = document.szamologep.eredmeny.value; if (a) { document.szamologep.eredmeny.value = eval(a) } } </script> <h2 align="center">Számológép!</h2> <form name="szamologep"> <table border="2" align="center"> <tr> <td colspan="4"><input type="text" name="eredmeny"/></td> </tr> <tr> <td><input type="button" value="1" onclick="beker(1)"/></td> <td><input type="button" value="2" onclick="beker(2)"/></td> <td><input type="button" value="3" onclick="beker(3)"/></td> <td><input type="button" value="+" onclick="beker('+')"/></td> </tr> <tr> <td><input type="button" value="4" onclick="beker(4)"/></td> <td><input type="button" value="5" onclick="beker(5)"/></td> <td><input type="button" value="6" onclick="beker(6)"/></td> <td><input type="button" value="-" onclick="beker('-')"/></td> </tr> <tr> <td><input type="button" value="7" onclick="beker(7)"/></td> <td><input type="button" value="8" onclick="beker(8)"/></td> <td><input type="button" value="9" onclick="beker(9)"/></td> <td><input type="button" value="*" onclick="beker('*')"/></td> </tr> <tr> <td><input type="reset" value="C"/></td> <td><input type="button" value="0" onclick="beker(0)"/></td> <td><input type="button" value="=" onclick="szamol()"/></td> <td><input type="button" value="/" onclick="beker('/')"/></td> </tr> </table> </form> </body> </html> 

所以我需要在szamol（）中使用其他方法。

我们制作了另一个计算器，但有单选按钮。 我也在添加代码，所以你可以看到我们学到的东西。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Névtelen 1</title> <script> function szamol() { var a=parseInt(document.urlap.szam1.value); var b=parseInt(document.urlap.szam2.value); var e=0; if(document.urlap.muvelet[0].checked)e=a+b; if(document.urlap.muvelet[1].checked)e=ab; if(document.urlap.muvelet[2].checked)e=a*b; if((document.urlap.muvelet[3].checked) &&(b!=0))e=a/b; if((document.urlap.muvelet[3].checked) &&(b==0))e="Nullával nem osztunk"; if(document.urlap.muvelet[4].checked) { e=1; for(i=1;i<=b;i++) e=e*a; } document.urlap.eredmeny.value=e; } </script> </head> <body> <form name="urlap"> <table> <tr> <td>Szam1<input type="number" name="szam1" value="0"> <td>Szam2<input type="number" name="szam2" value="0"> </tr> <tr> <td>Összeadás<input type="radio" name="muvelet" checked> Kivon<input type="radio" name="muvelet"> Szoroz<input type="radio" name="muvelet"> Oszt<input type="radio" name="muvelet"> Hatvany<input type="radio" name="muvelet"> </tr> <tr> <td><input type="button" value="OK" onclick="szamol()"> <td><input type="reset" value="Reset"> </tr> <tr> <td>Eredmény:<input type="text" name="eredmeny"> </tr> </table> </form> </body> </html> 

Answer 1

继续Nikos M.留下的评论，您需要一种方法来确定您正在使用哪个运算符。 下面的代码只会考虑一个操作员，但如果您需要涵盖的话，它将执行您正在寻找的操作。

为了澄清上面的粗体文本，这将适用于以下表达式：

X + Y ， X - Y ， X * Y和X / Y

但不适用于以下表达式：

X + Y + Z ， X * Y + Z / P等

function szamol() {
        var a = document.szamologep.eredmeny.value;
        if (a) {
            var answer;
            var split = a.split(/([+,\-,*,\/]){1}/g);
            console.log('Split: ' + split);
            var first = Number(split[0]);
            var operator = String(split[1]);
            var second = Number(split[2]);
            switch(operator){
                case '+':
                    answer = first + second;
                break;
                case '-':
                    answer = first - second;
                break;
                case '*':
                    answer = first * second;
                break;
                case '/':
                    answer = first / second;
                break;
            }
            document.szamologep.eredmeny.value = answer;
        }
    }

我们设置了空的answer变量，然后我们使用正则表达式在任何运算符+, -, *, \\上拆分a值。 我们split的第一个元素是第一个数字，我们split的第二个元素是我们的运算符，我们split的第三个元素是第二个数字。

在我们完成了我们的工作之后，我们创建了一个switch案例，它检查我们正在使用哪个运算符，并根据它进行数学运算。 因为输入的是文本输入- JavaScript的假设我们正在处理字符串-这就是为什么我必须typecast的first和second变量Number()进行设置时。