<JavaScript>Money slicerの改良(入力値を追加、削除できるようにする)

こんなゆっくりエントリ書いてますけとじつは合宿0日目の夜です。

今回は以下のエントリの続きです。
poolbooyer.hatenablog.jp

前回の段階では入力値の変更ができませんでしたが今回のエントリでは入力値を変更できるように改良を行った記録を書きます。

Money slicerの改良

今回行った改良の概要

今回の改良点はこんな感じ

  • 入力フォームを追加、削除するボタンの配置
  • 入力フォームを追加、削除する機能の実装

今回追加したコード

htmlについて

htmlはボタンの作成、入力フォームを追加する領域を作りました。
コードは以下の通り

<button class="btn" style="color:white ;background-color: #68C5F3;margin-left: 10px;" onclick="add_button()">add</button>
<button class="btn" style="color:white ;background-color: #68C5F3;margin-left: 10px;" onclick="remove_button()">remove</button>

bootstrapを使ってるのでclassにbtnだけ書いてカラーはstyleでかいてます。
あとはボタンが3つ並んだときにビッタリくっついてると美しくないのでmarginとってます。

JavaScriptについて

JavaScriptは大きく(もクソもないけど)2つほど記述しました。
あとは2つの機能を追加するにあたって、現状の入力フォームが追加された数をカウントするcounter変数を作ってます。
まずはフォームを追加するボタンのコードから

var counter=1;
function add_button() {
  //フォームのコードを記述する変数(string)
  var input = " ";
//5個以上は使えないように制限
  if(counter<5){
    //counter変数を1追加
    counter++;
  }
  //for文を用いて入力フォームを必要個数分作成する
  for (var i =1; i < counter ; i++) {
    //入力フォームのコードを変数に追加(くわしくはコード外参照)
    input = input + "<input id=\"value" + i + "\" placeholder=\"値段" + (i + 1) + "\">";
  }
  //入力フォームを格納するエリアに追加
  input_area.innerHTML = input;
}

入力フォームを作成するところではidのところにvalueとフォームの番号を組み合わせたものを使ってます。あとはplaceholderにはユーザがわかりやすいようフォームの番号を1~で書いてます(idの番号に1足すだけ)
そうすることで出来上がるinputタグは以下のようになります。

<input id="value1" placeholder="値段2">

次にフォームを減らすコードです

function remove_button() {
  //counterが1より小さくならないようにする(フォームは最低でも1つ残す)
  if (counter > 1) {
    //counterを1減らす
    counter = counter - 1;
  }
  //入力フォームを格納する変数を定義(string)
  var input = " ";
  //入力フォームをcounterに合わせて作る
  for (var i =1; i < counter ; i++) {
    //入力フォームのコードを変数に追加(add_buttonと同様)
    input = input + "<input id=\"value" + i + "\" placeholder=\"値段" + (i + 1) + "\">";
  }
  //入力エリアにフォームのコードを追加
  input_area.innerHTML = input;
}

これを見ていただくとわかると思うんです。
フォームを追加する部分はコードがaddとremoveで一致してるんでfunction別に分けて共通化したほうがコードとして美しい気がするんですよね、、、

というわけで

今後の課題

  • フォームの追加、削除時に事前に入力してた値を保持できるように対応
  • 通化に向けたコードの記述

という感じで今回は終了
(ちなみに今回の修正も反映してサーバに上げてます。)