プログラムの超個人的なメモ

Memo for Programming.

【JS】動的に生成したinputタグを考える

JavaScript

■ はじめに

CSV/TSVテストデータを自動的に作るツールを作ることを考えている(※)。
個人的に、ツールを作る際に、一番汎用性があるのは、
JavaScriptではないかと。

　そこで、AWSマネージメントコンソールのような
値が入ってたら、動的に Textboxが生成するようなサンプルを
軽ーい気持ちで作ろうと思ったら、あまりいいサンプルがないのでメモ。

※ ツールについて

* 今回の記事をベースに、簡単なプロトタイプを作ってみた

https://dk521123.hatenablog.com/entry/2022/11/23/000000

目次

【１】今回やりたいこと
　１）値が入ってたら、動的に inputタグを生成する
　２）inputタグの動的生成のタイミングは、ユーザ入力後に行う
　３）値が入っていなかったら、動的生成を行わないよう制御
【２】サンプル

【１】今回やりたいこと

* 以下、今回やりたい仕様は、以下の通り。
～～～～～～
１）値が入ってたら、動的に inputタグを生成する
２）inputタグの動的生成のタイミングは、ユーザ入力後に行う
３）値が入っていなかったら、動的生成を行わないよう制御
～～～～～～

１）値が入ってたら、動的に inputタグを生成する

* createElement() で生成
 => これは全然難しくない
 => 以下の関連記事を参照のこと。

DOM ～基本編 / オブジェクト作成～
https://dk521123.hatenablog.com/entry/2022/11/19/000000

２）inputタグの動的生成のタイミングは、ユーザ入力後に行う

* 今回の場合、blurイベントで発火させる
 => ネットで調べると、ボタン押下してってのがよくあったが。
 => ここまで大したことない。
 => 以下の関連記事を参照のこと。

イベント～入門編～
https://dk521123.hatenablog.com/entry/2022/11/20/000000

３）値が入っていなかったら、動的生成を行わないよう制御

* 今回の場合、getElementsByTagName() で要素を取得してチェックする

DOM ～基本編 / オブジェクト取得～
https://dk521123.hatenablog.com/entry/2022/11/21/000000

【２】サンプル

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form id="mainForm">
  <div id="div0">
    <input id="itemName0" name="itemName0" class="inputText" type="text" maxlength="5" size="10">
  </div>
</form>
</body>
<script>
var index = 0;

function canAddInput() {
  var canAdd = true;
  console.log("Check input values");
  const inputTexts = document.getElementsByTagName("input");
  for(let i = 0 ; i < inputTexts.length ; i ++ ) {
    console.log(`Value = ${inputTexts[i].value}`);
    if (!inputTexts[i].value) {
      canAdd = false;
      break;
    }
  }
  return canAdd;
}

function addRow() {
  if (!canAddInput()) {
    console.log("No need to add inputs any more");
    return;
  }
  
  console.log("Need to add input!!");
  index = index + 1;
  const newDiv = document.createElement("div");
  newDiv.setAttribute("id", `div{index}`);
  
  const newInput = document.createElement("input");
  newInput.setAttribute("id", `itemName${index}`);
  newInput.setAttribute("name", `itemName${index}`);
  newInput.setAttribute("css", "inputText");
  newInput.setAttribute("type", "text");
  newInput.setAttribute("maxlength", "5");
  newInput.setAttribute("size", "10");
  newInput.setAttribute("value", "");
  newInput.addEventListener('blur', addRow);

  const mainForm = document.getElementById("mainForm");
  mainForm.appendChild(newDiv);
  newDiv.appendChild(newInput);
}

const inputText = document.getElementById("itemName0");
inputText.addEventListener('blur', addRow);
</script>
<html>

関連記事

DOM ～入門編～
https://dk521123.hatenablog.com/entry/2011/01/07/012520
DOM ～基本編 / getElementById() ～
https://dk521123.hatenablog.com/entry/2011/12/29/200502
DOM ～基本編 / オブジェクト取得～
https://dk521123.hatenablog.com/entry/2022/11/21/000000
DOM ～基本編 / オブジェクト作成～
https://dk521123.hatenablog.com/entry/2022/11/19/000000
DOM ～基本編 / オブジェクト操作～
https://dk521123.hatenablog.com/entry/2011/01/09/155824
JavaScript覚書
https://dk521123.hatenablog.com/entry/2010/01/15/191626
イベント～入門編～
https://dk521123.hatenablog.com/entry/2022/11/20/000000
JS でテスト用の超簡易なCSVデータ生成ツールを作ってみる
https://dk521123.hatenablog.com/entry/2022/11/23/000000
JS でファイル出力するCSVデータ生成ツールを作ってみる
https://dk521123.hatenablog.com/entry/2022/11/28/000000