<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は大きく(もクソもないけど)２つほど記述しました。
あとは２つの機能を追加するにあたって、現状の入力フォームが追加された数をカウントする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別に分けて共通化したほうがコードとして美しい気がするんですよね、、、
というわけで
