32292


いくつか質問している者です。場違いな位初心者で jsもちんぷんかんぷんです。 おかしな返答もあると思います。  
下図にあるような画面で数値を入力すると給与の計算をし、計算ボタンの左のテキストボックスに表示させるものを考えています。  
細かい計算としては、例えば時間給の計算と交通費などを計算したものの和を表示します。

色々考えて、調べて書いてみたのですがどうしても動きません。 可笑しいところを指摘してほしいです。

文字列から数値に変換する eval()を過去に試していますがそれでも駄目でした。

☆html

[code]

    <ons-template id="tab2.html">
        <ons-page id="second-page">
          <p style="text-align: center;">
            <div align="center">
            </form>
            </div>
            <br>
    　<div id="wrapper" align="center">
      <p><form name="frm1" style="display:inline;">時間給：<input type="tel" placeholder="時間" size="7" style="height:25px; text-align: right;" id="a10">×<input type="tel" placeholder="時間給" size="14" style="height:25px; text-align: right;" id="a20"><br>
            <br>日　給：<input type="tel" placeholder="日数" size="7" style="height:25px; text-align: right;" id="a11">×<input type="tel" placeholder="日給" size="14" style="height:25px; text-align: right;" id="a21"><br>
            <br>単位給：<input type="tel" placeholder="単位" size="7" style="height:25px; text-align: right;" id="a12">×<input type="tel" placeholder="単位給" size="14" style="height:25px; text-align: right;" id="a22"><br>
            <br>交通費：<input type="tel" placeholder="交通費" size="8" style="height:25px; text-align: right;" id="a3">円　　　　　　</form><br>
            <br>残　業：<input type="tel" placeholder="時間" size="7" style="height:25px; text-align: right;" id="a13">×<input type="tel" placeholder="時給" size="14" style="height:25px; text-align: right;" id="a23"><br>
            <br>休　日：<input type="tel" placeholder="時間" size="7" style="height:25px; text-align: right;" id="a14">×<input type="tel" placeholder="時給" size="14" style="height:25px; text-align: right;" id="a24"><br>
            <br>深　夜：<input type="tel" placeholder="時間" size="7" style="height:25px; text-align: right;" id="a15">×<input type="tel" placeholder="時給" size="14" style="height:25px; text-align: right;" id="a25"><br>
            <br><input type="text" name="C"><input type="button" value="計算" size="10"id="SumBtn"></form>
            <br><input type="button" value="登録" size="10" id="SaveBtn">
            </p>
    </div>
    </p>
        </ons-page>
    </ons-template>
    
[/code]

☆js

[code]

    function seki(){
    　 initsecond-page();
       $("#SumBtn").click(onSumBtn);
       x = document.getElementById("a10");
       x1 = document.getElementById("a11");
       x2 = document.getElementById("a12");
       x3 = document.getElementById("a13");
       x4 = document.getElementById("a14");
       x5 = document.getElementById("a15");
       y = document.getElementById("a20");
       y1 = document.getElementById("a21");
       y2 = document.getElementById("a22");
       y3 = document.getElementById("a23");
       y4 = document.getElementById("a24");
       y5 = document.getElementById("a25");
       t = document.getElementById("a3");
       if(x10 != null){
        z = x * y;
       }
       if(x1 != null){
        z1 = x1 * y1;
       }
       if(x2 != null){
        z2 = x2 * y2;
       }
       if(x3 != null){
        z3 = x3 * y3;
       }
       if(x4 != null){
        z4 = x4 * y4;
       }
       if(x5 != null){
        z5 = x5 * y5;
       } 
        function wa(){
            document.frm1.C.value = (z + z1 + z2 + z3 + z4 + z5 + t);
        }
    }
    
[/code]

[![画面](https://i.stack.imgur.com/SQoD5.png)](https://i.stack.imgur.com/SQoD5.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/fazED.png)](https://i.stack.imgur.com/fazED.png)


CC BY-SA 3.0
2017-01-31T13:14:17.827
32285
2017-02-01T01:28:28.717
2017-02-01T01:28:28.717
20458
20458
question
javascript monaca html html5
javascriptとhtmlの四則計算


>
[code]

>     x = document.getElementById("a10");
>  
[/code]

例えばこのコード、[`document.getElementById`](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById)が返すのは数値でも文字列でもなく`Element`オブジェクトです。`a10`は`<input
type="tel">`なので（なんで`number`じゃないんだろう…）実際に得られるのは[`HTMLInputElement`オブジェクト](https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement)です。入力された値は`value`プロパティで参照できますが、それは文字列型となります。四則計算を行うのであれば、文字列型を数値型に変換する必要があります。

…というように、実現しようとしていることに対して書かれているコードからはあまりにも知識不足のように見受けられます。しっかりと基礎を固めることをお勧めします。


CC BY-SA 3.0
2017-02-01T00:59:14.657
32292
2017-02-01T00:59:14.657
4236
32285
answer