複数のformの中から1つ取得した値を、javascriptに代入したい

前提条件・したいこと

formがparam1、param2、param3と三つあります
form param1の送信ボタンを押すと、num1の値が。

　 form param2の送信ボタンを押すと、num2の値が。
form param3の送信ボタンを押すと、num3の値が送信されます。
3. それぞれのformで送信された値を用いて、計算結果を表示します。

問題点

document.getElementByIdで取得する方法だと、1つのidの要素でしか値をとることが出来ません

###ソース

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>テストプログラム</title>
8</head>
9<body>
10  <form action="#" name="param1" id="param1"></form>
11  <input type="text" name="num" id="num1" value="1" form="param1">
12  <input type="button" value="送信" onClick="func();" form="param1">
13  
14  <form action="#" name="param2" id="param2"></form>
15  <input type="text" name="num" id="num2" value="2" form="param2">
16  <input type="button" value="送信" onClick="func();" form="param2">
17  
18  <form action="#" name="param3" id="param3"></form>
19  <input type="text" name="num" id="num3" value="3" form="param3">
20  <input type="button" value="送信" onClick="func();" form="param3">
21  
22  <div id="answer"></div>
23</body>
24</html>

javascript
1  function func() {
2      const x = document.getElementById('num1').value;
3      console.log(x);
4      let numx = parseInt(x);
5      numx = numx + 1;
6      document.getElementById('answer').innerHTML = numx;
7    }

###試してみたこと
document.getElementsByNameで値を取得しようとしました。

javascript
1  function func() {
2      const x = document.getElementsByName('num')[0].value;
3      console.log(x);
4      let numx = parseInt(x);
5      numx = numx + 1;
6      document.getElementById('answer').innerHTML = numx;
7    }

ですが、これも送信ボタン押したところの値を取得出来ませんでした。

各formごとの値を取得できるようにするためには、どうすればよろしいでしょうか。
皆様方から、ご助言を頂けたらと思います。
お手数ですが、宜しくお願い致します。

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

回答1件

ベストアンサー

元のコードを改善するならこんな風にできます。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>テストプログラム</title>
9</head>
10
11<body>
12    <form action="#" name="param1" id="param1"></form>
13    <input type="text" name="num" id="num1" value="1" form="param1">
14    <input type="button" value="送信" onClick="func(1);" form="param1">
15
16    <form action="#" name="param2" id="param2"></form>
17    <input type="text" name="num" id="num2" value="2" form="param2">
18    <input type="button" value="送信" onClick="func(2);" form="param2">
19
20    <form action="#" name="param3" id="param3"></form>
21    <input type="text" name="num" id="num3" value="3" form="param3">
22    <input type="button" value="送信" onClick="func(3);" form="param3">
23
24    <div id="answer"></div>
25    <script>
26        function func(i) {
27            const x = document.getElementById('num' + i).value;
28            let numx = parseInt(x);
29            numx = numx + 1;
30            document.getElementById('answer').innerHTML = numx;
31        }
32    </script>
33</body>
34
35</html>