<JavaScript>同じclassのフォームをidと関連付けて取る

忙しい時期をとりあえず超えたので遊びで作ってみるお

目次

  1. やること
  2. 新規で使うこと
  3. 実際のコード

1.やること

今回はおんなじクラスのformから情報をとってきます。 取得する時に、同じクラスのフォームにそれぞれでidを割り振っているので値とidを関連付けて取得します。 読み込んだデータは(今回は特に何もせず)出力だけします。

2. 新規で使うこと

今回は新規で使うことととしては発火させるトリガーをonclickからeventlistenerにしました。 eventlistenerを用いた理由としてはhtml側で発火させるタイミングいじるのもめんどくさくなる(?)のでjs側で全部調整したいと思ったからです。

queryselecter使ってみようかと思ったんですけどidとclassで混乱しそうだったのでやめました

3. 実際のコード

今回はcodepenを使ってみます。 まずは全体の完成物から

formにテキストを入力してpushを押すと、フォームのid+フォームの内容が出てきます。

See the Pen 同classでIDとvalueを関連付けて保存 by Ryo NIioka (@poolbooyer) on CodePen.

まずは今回の大きいところ
イベントを聞くところ

const target = document.getElementById("push");
target.addEventListener('click', view_data, false);

ターゲットになるelementにaddEventListenerを追加します。 ターゲットを指定してその時に使いたいイベントを選択して発火させれます。今回はボタンを選択してポタンがクリックされたら発火します。 次、発火させる内容 今回は情報を読み出す関数と表示する関数を呼び出してるんでそこの話は飛ばします。
実際に情報を呼び出す関数

function get_elements(classname) {
  //取得するクラスの要素数を確認
  var list_len = document.getElementsByClassName(classname).length;
  //取得した値を保持するarray
  var json=[];
  //要素数だけ実施
  for (var i = 0; i < list_len; i++) {
    //対象の要素を1つずつ取得
    input = document.getElementsByClassName(classname)[i];
    //IDと値を取得し、配列に追加
    var add={id:input.getAttribute("id"),value:input.value};
    json.push(add);
  }
  //取得した情報を返す
  return json;
}

やってることとしては配列に対して取得した情報のオブジェクトを追加している形になります。追加結果を返します。
表示する部分はこんな感じ

//取得した情報を表示する関数
function add_data(data){
  //表示用のリストを作成
  var text="<dl>";
  //取得したフォームの個数分実行
  for (var i=0;i<data.length;i++){
    //リストの要素を追加
    text=text+"<dt>id:"+data[i].id+"</dt><dd>value:"+data[i].value+"</dd>";
  }
  //タグを閉じる
  text=text+"</dl>";
  //表示エリアを取得
  var area=document.getElementById("output_area");
  //表示する
  area.innerHTML=text;
}

使いみちもなく作りましたがトリガの勉強になったので良かったです。 (とつぜんのまとめ)