大量の要素を自由に増減して数値を取得したい

javascriptで簡単な足し算マシンを作りました。

3つのデータの値の和をresultエリアに表示します。

さて、inputを数百個に増やしたいと思っています。
その場合まさか手作業でやるわけにはいきません。

しかしどのような処理をするべきなのかわからず、質問させていただきました。

なにとぞ御教示よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>足し算マシン</title>
6  <link rel="stylesheet" href="css.css">
7</head>
8<body>
9  <div class="container">
10
11    <div class="input-area">
12      <input type="text" id="data1" placeholder="data1">
13      <input type="text" id="data2" placeholder="data2">
14      <input type="text" id="data3" placeholder="data3">
15
16    </div>
17
18    <div class="result-area">
19      <p id="result">ここに結果を表示します</p>
20    </div>
21
22  </div>
23  <script src="js.js"></script>
24</body>
25</html>
26

css
1body {
2  background: #ccc;
3  font-size: 16px;
4  font-family: Arial, sans-serif;
5}
6
7.container {
8  width: 300px;
9  margin: 25px auto;
10  background: #980;
11  padding:30px;
12}
13
14#data1,
15#data2,
16#data3 {
17  display: block;
18  margin-top : 10px;
19  font-size: 14px;
20  box-sizing: border-box;
21  padding: 10px;
22  height: 40px;
23  border-radius: 5px;
24  border: none;
25}
26
27.input-area {
28  font-size: 0;
29  margin-bottom: 20px;
30}
31
32.result-area {
33  background: #8f8;
34  padding: 10px;
35  height: 130px;
36  border-radius: 5px;
37  position: relative;
38}
39
40#result {
41  margin: 0;
42}
43

js
1(function() {
2  'use strict';
3
4  var var1 = document.getElementById('data1');
5  var var2 = document.getElementById('data2');
6  var var3 = document.getElementById('data3');
7  var result = document.getElementById('result');
8
9  var notnumeric = true;
10
11
12  function checkInput() {
13    // /^[1-9][0-9]*$/
14    if (
15      var1.value.match(/^[1-9][0-9]*$/) !== null &&
16      var2.value.match(/^[1-9][0-9]*$/) !== null &&
17      var3.value.match(/^[1-9][0-9]*$/) !== null
18    ) {
19      notnumeric = false;
20    } else {
21      notnumeric = true;
22    }
23  }
24
25  window.document.onkeyup = function(event){
26    var str;
27
28    var pi1 = parseInt(var1.value);
29    var pi2 = parseInt(var2.value);
30    var pi3 = parseInt(var3.value);
31
32
33
34    if (notnumeric === true) {
35      str="計算不可";
36      result.textContent = str;
37      return;
38    }
39
40    str = pi1+pi2+pi3;
41
42    result.textContent = str;
43
44  };
45
46  var1.addEventListener('keyup', checkInput);
47  var2.addEventListener('keyup', checkInput);
48  var3.addEventListener('keyup', checkInput);
49})();
50

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

回答1件

ベストアンサー

ざっくりとinput要素を配置したいノードのinnerHTMLプロパティに動的に生成したHTMLコードを挿入すればよいでしょう.

HTML
1<div id="inputs"></div>
2<button id="culc">足し算</button>
3<output id="out"></output>

JavaScript
1"use strict";
2{
3	let source = "";
4	for(let i = 0; i < 100; i++){
5		source += `<input type="number" value="0" placeholder="数値を入力"/>`
6	}
7	inputs.innerHTML = source;
8	culc.onclick = e => out.value = 
9		[].reduce.call(inputs.childNodes, (prev, input) => prev + input.valueAsNumber, 0);
10}