数値を変化させても、情報を保持したままインプット要素を増やす方法について

javascriptのロジックについて質問です。
プルダウンの数値でinput要素が変化する処理を作成しています。
今のロジックだと、1度inputを削除してから作り直しているため、入力していた情報が消えてしまいます。

やりたいこと
・2 → 4に増えた場合は、1,2で入力されている内容は消さずに、3,4のinputのみを増やしたいです。
・4 → 2に減った場合は、値を保持せずに4,3のinputを削除したいです。
・増やした場合も減らした場合も数字が昇順になるようにしたいです。

また、差分を取得した場合に、最初だけNaNになってしまう理由がわからないため、教えていただければ幸いです。。。
皆様のお力をお貸しいただけないでしょうか。。。

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</head>
8<body>
9  <select onchange="num_change(this)">
10    <option value="1">1</option>
11    <option value="2">2</option>
12    <option value="3">3</option>
13    <option value="4">4</option>
14    <option value="5">5</option>
15  </select><br>
16
17  <input id="input_1" type="number" placeholder="id_1" style="display: block;">
18  <script src="js/main.js"></script>
19</body>
20</html>

javascript
1
2// 1つ前の値保持用
3var before = 1;
4
5let num_change = (obj) => {
6  const max_num = 5;
7  let num_val = Number(obj.value); 
8  let diff = Math.abs(num_val - before);
9  console.log(diff);
10
11  for (i = 2; i <= max_num; i++) {
12    let input_x_el = document.getElementById('input_' + i);
13    if (input_x_el != null) {
14      input_x_el.remove();
15    }
16  }
17
18  for (i = num_val; i > 1; i--) {
19    console.log(i);
20    let input_1_el = document.getElementById('input_1');
21    let input_x = document.createElement('input');
22    input_x.id = 'input_' + i;
23    input_x.type = 'number';
24    input_x.placeholder = 'id_' + i;
25    input_x.style = 'display: block;';
26    input_1_el.after(input_x);
27  }
28  before = num_val;
29}
30num_change(this);

なぜか最初がNaNになります。。。

理想です

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

回答1件

num_change(this);
の this が期待したものではないからです。
それを実行する直前に
console.log(this);
として、中身を調べてみると吉。

js
1<!DOCTYPE hrml>
2<meta charset="UTF-8">
3<title></title>
4<style>
5#hoge input {
6  display: block;
7}
8</style>
9
10<body>
11  <select id="NC">
12    <option value="1">1</option>
13    <option value="2" selected>2</option>
14    <option value="3">3</option>
15    <option value="4">4</option>
16    <option value="5">5</option>
17  </select><br>
18
19  <div id="hoge">
20    <input type="number">
21  </div>
22
23<script>
24
25function A (event) {
26  let
27    e = event.target,
28    val = parseInt (e.value, 10);
29  if (val)
30    B (e, val);
31}
32
33
34function B (e = NC, len = parseInt (e.value,10)) {
35  let
36    inps = [...hoge.querySelectorAll ('input')],
37    esAry = inps.map (e=> [parseInt (e.value, 10), e]),
38    n = len - inps.length;
39
40  esAry.sort (([a], [b])=> isNaN (a) || a - b);
41  esAry.forEach (([,e])=> hoge.appendChild (e));
42
43  if (0 < n) {
44    for (let i = 0; i < n; i++) {
45      let
46        fst = esAry[0],
47        ne = fst[1].cloneNode (false);
48      Object.assign (ne, {value: ''});
49      hoge.appendChild (ne);
50    }
51  }
52  else if (n < 0)
53    esAry.splice (len).forEach (([,e])=> e.remove ());
54}
55
56
57NC.addEventListener ('change', A, false);
58
59
60B();
61
62</script>
63