数値計算(その７)

課題 HTML JavaScript

前回の続きです。


今回は課題の回答です。



[課題]
以下を引数付きの関数を使って書き換えてください。

<html>
  <head>
    <title>四則演算</title>
  </head>
  <script type="text/javascript">
  function Multiply()
  {
     frm1.result.value = (frm1.firstValue.value * frm1.secondValue.value);
  }

  function Add()
  {
     frm2.result.value = (parseInt(frm2.firstValue.value) + parseInt(frm2.secondValue.value));
  }

  function Minus()
  {
     frm3.result.value = (frm3.firstValue.value - frm3.secondValue.value);
  }

  function Divide()
  {
     frm4.result.value = (frm4.firstValue.value / frm4.secondValue.value);
  }
  </script>
  <body>
    ★掛け算
    <form name="frm1">
      <input type="text" name="firstValue" size="15" value=0>×
      <input type="text" name="secondValue" size="15" value=0>＝
      <input type="text" name="result" size="15" value=0>
      <INPUT type="button" name="buttoncalc" onClick="Multiply()" value="計算実行">
    </form>
    <br>

    ★足し算
    <form name="frm2">
      <input type="text" name="firstValue" size="15" value=0>＋
      <input type="text" name="secondValue" size="15" value=0>＝
      <input type="text" name="result" size="15" value=0>
      <INPUT type="button" name="buttonadd" onClick="Add()" value="計算実行">
    </form>
    <br>

    ★引き算
    <form name="frm3">
      <input type="text" name="firstValue" size="15" value=0>−
      <input type="text" name="secondValue" size="15" value=0>＝
      <input type="text" name="result" size="15" value=0>
      <INPUT type="button" name="buttonminus" onClick="Minus()" value="計算実行">
    </form>
    <br>

    ★割り算
    <form name="frm4">
      <input type="text" name="firstValue" size="15" value=0>÷
      <input type="text" name="secondValue" size="15" value=0>＝
      <input type="text" name="result" size="15" value=0>
      <INPUT type="button" name="buttondivide" onClick="Divide()" value="計算実行">
    </form>
    <br>
  </body>
</html>


[答え]

<html>
  <head>
    <title>四則演算</title>
  </head>
  <script type="text/javascript">
  <!--
     function Multiply(a,b,c)
     {
        c.value = (a * b);
     }

     function Add(a,b,c)
     {
        c.value = (parseInt(a) + parseInt(b));
     }

     function Minus(a,b,c)
     {
        c.value = (a - b);
     }

     function Divide(a,b,c)
     {
        c.value = (a / b);
     }

  // -->
  </script>
  <body>
    ★掛け算
    <form name="frm1">
      <input type="text" name="firstValue" size="15" value=10>×
      <input type="text" name="secondValue" size="15" value=20>＝
      <input type="text" name="result" size="15" value=0>
      <INPUT type="button" name="buttoncalc" onClick="Multiply(firstValue.value,secondValue.value,result)" value="計算実行">
    </form>
    <br>

    ★足し算
    <form name="frm2">
      <input type="text" name="firstValue" size="15" value=30>＋
      <input type="text" name="secondValue" size="15" value=40>＝
      <input type="text" name="result" size="15" value=0>
      <INPUT type="button" name="buttonadd" onClick="Add(firstValue.value,secondValue.value,result)" value="計算実行">
    </form>
    <br>

    ★引き算
    <form name="frm3">
      <input type="text" name="firstValue" size="15" value=50>−
      <input type="text" name="secondValue" size="15" value=10>＝
      <input type="text" name="result" size="15" value=0>
      <INPUT type="button" name="buttonminus" onClick="Minus(firstValue.value,secondValue.value,result)" value="計算実行">
    </form>
    <br>

    ★割り算
    <form name="frm4">
      <input type="text" name="firstValue" size="15" value=50>÷
      <input type="text" name="secondValue" size="15" value=3>＝
      <input type="text" name="result" size="15" value=0>
      <INPUT type="button" name="buttondivide" onClick="Divide(firstValue.value,secondValue.value,result)" value="計算実行">
    </form>
    <br>
  </body>
</html>

四則演算が変わっただけで関数の形式は全て同じです。
引数に値を渡してあげれば、あとは関数がそれを計算してくれるのです。便利!!

次へ進む


★参考サイト

[HTML/JavaScript]

(1) 初心者向きのｊａｖａScript＆HTMLタグ・CSS集
(2) JavaScript の書き方