帶Javascript的計算器

-3

我是一名初學者，嘗試在Javascript中編寫一個簡單的計算器，但出了點問題。帶Javascript的計算器

當用戶輸入數字，「數字1」和「2號」，那麼下面的應發生執行加，減，乘，除（例如）：

Number1 = 5, Number2 = 3 
then => 5 + 3 = 8, 
      5 - 3 = 2, 
      5 * 3 = 15, 
      5/3 = 1.6

當用戶給出的數字到具體的等式，然後顯示這些操作的結果。

<html> 
<head> 
<title>Function Calculator</title> 
<script type="text/javascript"> 
    function show_cal(){ 
    function num(){ 
    a=Number(document.form1.num1.value); 
    b=Number(document.form1.num2.value); 
    c=a+b; 
    document.form1.result1.value=c; 

    a=Number(document.form1.num1.value); 
    b=Number(document.form1.num2.value); 
    c=a-b; 
    document.form1.result2.value=c; 

    a=Number(document.form1.num1.value); 
    b=Number(document.form1.num2.value); 
    c=a*b; 
    document.form1.result3.value=c; 

    a=Number(document.form1.num1.value); 
    b=Number(document.form1.num2.value); 
    c=a/b; 
    document.form1.result4.value=c; 
    } 

    function addition(){ 
    a=Number(document.form1.num3.value); 
    b=Number(document.form1.num4.value); 
    c=a+b; 
    document.form1.result1.value=c; 
    } 

    function subtraction(){ 
    a=Number(document.form1.num5.value); 
    b=Number(document.form1.num6.value); 
    c=a-b; 
    document.form1.result2.value=c; 
    } 

    function multiply(){ 
    a=Number(document.form1.num7.value); 
    b=Number(document.form1.num8.value); 
    c=a*b; 
    document.form1.result3.value=c; 
    } 

    function division(){ 
    a=Number(document.form1.num9.value); 
    b=Number(document.form1.num10.value); 
    c=a/b; 
    document.form1.result4.value=c; 
    } 

    /*function formValidator(){ 
    var number = document.getElementById('number'); 
     if(isNumeric(number, "Only Numbers pls")){ 
     return true; 
     }return false; 
    } 

    function notEmpty(elem, helperMsg){ //gia keno 
     if(elem.value.length == 0){ 
      alert(helperMsg); 
      elem.focus(); // set the focus to this input 
     return false; 
     } 
    return true; 
    } 

    function show_clear(){ 
     document.form1.display.value=null; 
     num1= null; 
     num2 = null; 
     lastaction= null; 
     action = null; 
    } */ 
} 

</script> 
</head> 

<body> 
<table width="400" align="center" bgcolor="#C0C0C0"> 
    <form name="form1" action=""> 

    <tr align="center"> 
    <td width="600" height="112" align="center" border="1"> 
     <h1 align="center"> Calculator </h1> 
    Number 1: <input name="num1" type="text" size=10/> 
    Number 2: <input name="num2" type="text" size=10/> 
     </td> 
    </tr> 

    <tr align="center"> 
    <td width="500"> 
    <input name="num3" type="text" size=10/> + 
    <input name="num4" type="text" size=10/> = 
    <input name="result1" type="text" size=10/> 
    </td> 
    </tr> 

    <br/> 
    <tr align="center"> 
    <td width="500"> 
    <input name="num5" type="text" size=10/> - 
    <input name="num6" type="text" size=10/> = 
    <input name="result2" type="text" size=10/> 
    </td> 
    </tr> 

    <br/> 
    <tr align="center"> 
    <td width="500"> 
    <input name="num7" type="text" size=10/> * 
    <input name="num8" type="text" size=10/> = 
    <input name="result3" type="text" size=10/> 
    </td> 
    </tr> 

    <br/> 
    <tr align="center"> 
    <td width="500"> 
    <input name="num9" type="text" size=10/>/
    <input name="num10" type="text"size=10/> = 
    <input name="result4" type="text" size=10/> 
    </td> 
    </tr> 


     <br/> 
    <td height="13"></tr> 
    <tr align="center" width="100"> 
    <td> 
    <input name="result" type="button" onClick="show_cal()" value="Result" /> 
    <input type="button" onClick="show_clear()" value="Clear"/> 
    </td> 
    </tr> 

</form> 
</table> 
</body> 
</html>

來源

2013-02-26 Mary

您使用了 'Java' 作爲標記。這個問題是JavaScript，它與Java無關。 – Aurand 2013-02-26 21:57:31

「有問題」。也許你可以提供更多的細節？你有沒有嘗試過使用JavaScript調試器？ – 2013-02-26 21:58:14

嘗試類似JSFiddle：http://jsfiddle.net/sperske/Na4MK/，這將幫助其他人瞭解發生了什麼問題（只要點擊「添加評論」，答案就會很快跟上） – 2013-02-26 22:00:39

問題是你有一個函數show_calc內的功能總和，你不調用這個函數。完成showcalc函數時需要調用函數num。

<script type="text/javascript"> 
    function show_cal(){ 

    function num(){ 
     a=Number(document.form1.num1.value); 
     b=Number(document.form1.num2.value); 
     c=a+b; 
     document.form1.result1.value=c; 

     a=Number(document.form1.num1.value); 
     b=Number(document.form1.num2.value); 
     c=a-b; 
     document.form1.result2.value=c; 

     a=Number(document.form1.num1.value); 
     b=Number(document.form1.num2.value); 
     c=a*b; 
     document.form1.result3.value=c; 

     a=Number(document.form1.num1.value); 
     b=Number(document.form1.num2.value); 
     c=a/b; 
     document.form1.result4.value=c; 
    } 

    function addition(){ 
     a=Number(document.form1.num3.value); 
     b=Number(document.form1.num4.value); 
     c=a+b; 
     document.form1.result1.value=c; 
    } 

    function subtraction(){ 
     a=Number(document.form1.num5.value); 
     b=Number(document.form1.num6.value); 
     c=a-b; 
     document.form1.result2.value=c; 
    } 

    function multiply(){ 
     a=Number(document.form1.num7.value); 
     b=Number(document.form1.num8.value); 
     c=a*b; 
     document.form1.result3.value=c; 
    } 

    function division(){ 
     a=Number(document.form1.num9.value); 
     b=Number(document.form1.num10.value); 
     c=a/b; 
     document.form1.result4.value=c; 
    } 

    num(); 
}

但我更好的方法來正確地做這個。

來源

2013-02-26 22:07:22 Guillermo81

您的代碼非常混亂，反覆違反DRY（不要重複自己）。是的，你多次重複自己：對

試試這個：

<form action="javascript:void(null);" method="post" onSubmit="calculate(this);"> 
    <p><label>Number 1: <input type="number" /></label></p> 
    <p><label>Number 2: <input type="number" /></label></p> 
    <p><input type="submit" value="Calculate" /></p> 
    <p>N1 + N2 = <span>-</span></p> 
    <p>N1 - N2 = <span>-</span></p> 
    <p>N1 * N2 = <span>-</span></p> 
    <p>N1/N2 = <span>-</span></p> 
</form> 
<script type="text/javascript"> 
    function calculate(form) { 
     var fc = form.children, 
      n1 = parseInt(fc[0].children[0].children[0].value || 0,10), 
      n2 = parseInt(fc[1].children[0].children[0].value || 0,10); 
     fc[3].children[0].firstChild.nodeValue = n1+n2; 
     fc[4].children[0].firstChild.nodeValue = n1-n2; 
     fc[5].children[0].firstChild.nodeValue = n1*n2; 
     fc[6].children[0].firstChild.nodeValue = n1/n2; 
    } 
</script>

JSFiddle demonstration

來源

2013-02-26 22:07:33

爲什麼要使用'parseInt'？我認爲'parseFloat'或'+（num）'對於輸入的大量可能的數字更好 – Ian 2013-02-26 22:15:43

帶Javascript的計算器

回答

相關問題