javascriptでform値をonclickで取得したい

前提・実現したいこと

金種別を計算するアプリをjavascriptで作りました。
各form値をbuttonのonclickに記載した関数の引数で取得したのですが、余りスマートでないためリンク先のjsファイルで取得したいと思うのですが方法がわかりません。
ボタンクリックでform内の値を取得する方法を教えていただけないでしょうか。
よろしくお願いします。

該当のソースコード

html
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9
10  <link rel="manifest" href="site.webmanifest">
11  <link rel="apple-touch-icon" href="icon.png">
12  <!-- Place favicon.ico in the root directory -->
13
14  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
15    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
16
17  <meta name="theme-color" content="#fafafa">
18</head>
19
20<body>
21
22  <style>
23    form dl dt {
24      width: 200px;
25      height: 40px;
26      padding: 10px 0;
27      line-height: 40px;
28      float: left;
29    }
30
31    form dl dd {
32      padding: 10px 0;
33      margin: 0;
34    }
35
36    .box {
37      box-sizing: border-box;
38      width: 150px;
39      height: 40px;
40      margin: 0;
41      padding: 0 10px;
42    }
43  </style>
44
45  <div class="container">
46    <div class="w-60">
47      <form class="kinshu">
48        <dl>
49          <dt>10000円：</dt>
50          <dd><input type="number" name="v10000" class="box">枚</dd>
51
52          <dt>5000円：</dt>
53          <dd><input type="number" name="v5000" class="box">枚</dd>
54
55          <dt>1000円：</dt>
56          <dd><input type="number" name="v1000" class="box">枚</dd>
57
58          <dt>500円：</dt>
59          <dd><input type="number" name="v500" class="box">枚</dd>
60
61          <dt>100円：</dt>
62          <dd><input type="number" name="v100" class="box">枚</dd>
63
64          <dt>50円：</dt>
65          <dd><input type="number" name="v50" class="box">枚</dd>
66
67          <dt>10円：</dt>
68          <dd><input type="number" name="v10" class="box">枚</dd>
69
70          <dt>5円：</dt>
71          <dd><input type="number" name="v5" class="box">枚</dd>
72
73          <dt>1円：</dt>
74          <dd><input type="number" name="v1" class="box">枚</dd>
75        </dl>
76
77        <p><input type="button" class="calc-btn" onclick="calc(
78          v10000.value,
79          v5000.value,
80          v1000.value,
81          v500.value,
82          v100.value,
83          v50.value,
84          v10.value,
85          v5.value,
86          v1.value
87        );" value="計算"></p>
88
89        <dt>合計：</dt>
90        <dd><input type="text" id="totale_value" class="box" readonly="">円</dd>
91
92      </form>
93    </div>
94  </div>
95
96  <script>
97    function calc(
98      v10000, v5000, v1000, v500, v100, v50, v10, v5, v1
99    ) {
100      let total = document.getElementById('totale_value').value =
101        Math.round(
102          (10000 * v10000) + (5000 * v5000) + (1000 * v1000) + (500 * v500) + (100 * v100) + (50 * v50) + (10 * v10) + (5 * v5) + (1 * v1)
103        );
104    }
105
106  </script>
107
108</body>
109
110</html>

itagagaki

2021/11/03 13:30

ボタンクリックでJavaScriptコードを動かすには： javascript button click JavaScriptコードでフォームの値を取得するには： javascript form 取得で検索してください。

tegeken

2021/11/03 13:31

さっそくありがとうございます。ソースコードを忘れていたので追加しました。

行動規範の内容に同意します

回答2件

計算ボタンのonclickで各入力欄の値を取得する場合であれば、onclickでthisを使用すると「計算ボタン」自体を取得できますので、そこからform自体を取得した上で各inputにアクセスすることができます。

html
1  <p><input type="button" class="calc-btn" onclick="calc(this)" value="計算"></p>

javascript
1
2function calc(input) {
3  const form = input.form // フォーム自体が取得できます。
4  const inputs = input.form.elements // フォーム以下の入力欄等が配列として取得できます。
5  ...
6}
7

form.elementsで取得できるものには結果のinputやボタンなども含まれているので取り除くことで入力欄のみに絞り込むことができると思います。

javascript
1    function calc(input) {
2
3      // 入力値
4      // 各inputのname属性から何倍にするか(multiplier)と入力値(value)を取り出す。
5      // - nameから取り出すのはちょっと無理矢理なのでdata属性なんかを使うのが本当はおすすめです。
6      const inputs = Array.from(input.form.elements).map(function(elem) {
7        if (!elem.name) return
8        const mul = parseInt(elem.name.replace('v', ''), 10)
9        const value = parseInt(elem.value, 10)
10
11        // 取り出した値が数字でないならreturn
12        if (!isFinite(mul)) return
13        if (!isFinite(value)) return
14
15        return {
16          multiplier: mul,
17          value: value
18        }
19      }).filter(function(value) {
20        // valueに値が入っているもののみに絞り込む
21        return value
22      })
23      // inputsはこんな感じになります: [ { multiplier: 1, value: 1}, { multiplier: 5, value: 2}, ..... ]
24
25      // 入力値を順番に計算しつつ足していく
26      const total = inputs.reduce(function(sum, input) {
27        return sum + input.multiplier * input.value
28      }, 0)
29
30      // 結果を出力
31      document.getElementById("totale_value").value = total
32      return false;
33    }

投稿2021/11/03 17:43

ka2n

総合スコア47

tegeken

2021/11/03 22:16

ありがとうございます。私のformの書き方が間違っていたのでnameから余計な操作が必要になったのですね。そこまで教えていただき感謝です。因みに各入力欄に <input type="number" name="v10000" data-yen="10000" class="box"> のようにdata属性を付けた場合 javascriptはどのようになりますか？

ka2n

2021/11/04 01:06

data属性の場合は yambejpさんの回答(https://teratail.com/questions/367628#reply-499285)にある通り要素の`elem.dataset`からアクセスすることができます。

行動規範の内容に同意します

ベストアンサー

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('.calc-btn').addEventListener('click',()=>{
4    const v=[...document.querySelectorAll('[data-yen]')].map(x=>x.dataset["yen"]*x.value).reduce((x,y)=>x+y);
5    document.querySelector('#totale_value').value=v;
6  });
7});
8</script>
9<form class="kinshu">
10<dl>
11<dt>10000円：</dt>
12<dd><input type="number" data-yen="10000" class="box" value="0" min="0">枚</dd>
13<dt>5000円：</dt>
14<dd><input type="number" data-yen="5000" class="box" value="0" min="0">枚</dd>
15<dt>1000円：</dt>
16<dd><input type="number" data-yen="1000" class="box" value="0" min="0">枚</dd>
17<dt>500円：</dt>
18<dd><input type="number" data-yen="500" class="box" value="0" min="0">枚</dd>
19<dt>100円：</dt>
20<dd><input type="number" data-yen="100" class="box" value="0" min="0">枚</dd>
21<dt>50円：</dt>
22<dd><input type="number" data-yen="50" class="box" value="0" min="0">枚</dd>
23<dt>10円：</dt>
24<dd><input type="number" data-yen="10" class="box" value="0" min="0">枚</dd>
25<dt>5円：</dt>
26<dd><input type="number" data-yen="5" class="box" value="0" min="0">枚</dd>
27<dt>1円：</dt>
28<dd><input type="number" data-yen="1" class="box" value="0" min="0">枚</dd>
29</dl>
30<p><input type="button" class="calc-btn" value="計算"><input type="reset" value="リセット"></p>
31<dt>合計：</dt>
32<dd><input type="text" id="totale_value" class="box" value="0" readonly>円</dd>
33</form>