0

私は初心者で、Javascript で簡単な電卓を書こうとしていますが、何かが間違っています。

ユーザーが数字「Number 1」と「Number 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>
4

5 に答える 5

4

問題は、関数show_calc内に関数sumがあり、この関数を呼び出さないことです。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-26T22:07:22.430 に答える
3

あなたのコードはよりクリーンで、DRY (Don't Repeat Yourself) に繰り返し違反している可能性があります。

これを試して：

<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 デモンストレーション

于 2013-02-26T22:07:33.743 に答える