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()進行設置時。