-2

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

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

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

☆html

<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>

☆js

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);
    }
}

画面

画像の説明をここに入力

10
  • HTMLの表示編集ありがとうございます。
    – 見習いA
    Commented 2017年1月31日 14:13
  • HTMLの方で<form>タグのnameはfrm1ですが、jsの方での指定はfm1になっているように見えます。ここを直しても期待する動作をしませんか?
    – nekketsuuu
    Commented 2017年1月31日 14:32
  • 気づいていませんでした! 修正して確かめてみます!
    – 見習いA
    Commented 2017年1月31日 14:39
  • ダメでした...他の箇所で間違えているようです。朝から色々ありがとうございます!
    – 見習いA
    Commented 2017年1月31日 14:42
  • あ、あと、if〜else if〜の解釈を間違っていませんか? このままだとzz1z5は少なくともどれか1つしか定義されません。
    – nekketsuuu
    Commented 2017年1月31日 14:46

1 件の回答 1

1
x = document.getElementById("a10");

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

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

2
  • telを指定しているのは スマートフォン上のキーボードの指定のためです numberだとローマ字入力の時に数字以外の物を入力する可能性がある為 それを防ぐためです。
    – 見習いA
    Commented 2017年2月1日 1:23
  • 知識不足なのは、一昨日jsの勉強を大学での課題の為 始めたばかりで、基礎も一部しか覚えられていない状態です。 すいません。 回答ありがとうございました! きちんと勉強をします。
    – 見習いA
    Commented 2017年2月1日 1:24

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。