質問編集履歴

誤字脱字の修正

2019/09/03 05:18

投稿

rickey

スコア24

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -41,7 +41,7 @@
 クラス構文に全く触れずに、別途関数を作って、セレクトボックスを削除して追加して強引にコードを書きました。
 クラス構文を利用して、これと同じことはできないでしょうか？
-```htmkl
+```html
 <!DOCTYPE html>
 <html lang="ja">

javascriptコードを記載

2019/09/03 05:17

投稿

rickey

スコア24

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -120,4 +120,200 @@
     <script src="main.js"></script>
   </body>
 </html>
+```
+```javascript
+'use strict';
+{
+//参加者タブ-------------------------------------
+//★100)メンバー追加ボタンを押した時------
+  var memberListArray = ["主催者"];//  これを関数内に入れると、追加していけない。
+  const memberAddBtn = document.getElementById('memberAddBtn');//メンバー追加ボタン
+  const memberName_id = document.getElementById('memberName');//メンバー入力フォーム
+  const memberList_id = document.getElementById('memberList');//メンバーリストを追加していくul要素のid
+// 110)メンバーを配列に加える
+  function addMemberListArray() {
+    memberListArray.push(memberName_id.value);
+    console.log(memberListArray);
+    memberName_id.value = '';//メンバーの入力欄をクリアする※これをどこに入れるで作動が変わる
+    memberName_id.focus();
+  }//addMemberListArray
+//  メンバーリストを管理
+  class DisplayMemberList{
+   constructor(){
+     this.lists=[];
+   } //constructor
+    setup(){ //ulにliを追加していく
+      this.lists.forEach(index => {
+        memberList_id.appendChild(index.getli())
+      });
+    }//setup
+    //ボタンを押して一行追加する
+    go () {
+      this.lists.push(new MemberListOneColumn());
+      this.setup();
+//      console.log(this.lists);
+    }//go
+  }//displayMemberList class
+  class MemberListOneColumn {//リストの一行を管理
+    constructor() {
+//      <li class="memberList_li">
+//      <button class="delMember">'x'</button>
+//      <div>名前</div>
+//      </li>
+      this.li = document.createElement('li');
+      this.li.classList.add('memberList_li');
+      //deleteボタンの追加
+      const deleteBtn = document.createElement('button');
+      deleteBtn.classList.add('delMember');
+      deleteBtn.textContent = 'x';
+      this.li.appendChild(deleteBtn);
+      //テキストの追加
+      const div_memberName = document.createElement('div');
+      div_memberName.classList.add('div_memberName')
+      div_memberName.textContent = memberName_id.value;
+//      console.log(memberName_id.value);
+      this.li.appendChild(div_memberName);
+      //削除ボタンを押した時
+      deleteBtn.addEventListener('click', ()=> {
+        var idx=[].indexOf.call(memberList_id.querySelectorAll('li'),this.li);
+        displayMemberList.lists.splice(idx,1);
+        memberList_id.removeChild(this.li);
+        // 配列からもメンバーを削除する
+        memberListArray.splice(idx+1,1);
+        console.log(memberListArray)
+      });
+    }//constructor
+      getli(){
+        return this.li;
+      }//getli
+  }//MemberListOneColumn
+  const displayMemberList = new DisplayMemberList();
+  memberAddBtn.addEventListener('click', () => {
+    if (memberName_id.value !==''){
+      memberAddBtn.classList.remove('disabled');
+    }else{
+      memberAddBtn.classList.add('disabled');
+    };
+    if (memberAddBtn.classList.contains('disabled') === true){
+      return;
+    }
+    displayMemberList.go();//メンバーを一覧に表示させる
+    addMemberListArray();//110)メンバーを配列に加える
+//    checkMemberAreaBlank(); //101)名前の空欄チェック→110)メンバーを配列に加える
+  })//memberAddBtn.click
+//項目タブ-----------------------------------------------------------
+  const itemAddBtn = document.getElementById('itemAddBtn') ;//メンバー追加ボタン
+  const itemList_id = document.getElementById('itemList');//メンバーリストを追加していくul要素のid
+//  //  アイテムリストを管理
+  class DisplayItemList{
+    constructor(){
+      this.lists=[];
+    } //constructor
+    setup(){ //ulにliを追加していく
+      this.lists.forEach(index => {
+        itemList_id.appendChild(index.getli())
+      });
+    }//setup
+    //ボタンを押して一行追加する
+    go () {
+      this.lists.push(new ItemListOneColumn());
+      this.setup();
+      console.log(this.lists);
+    }//go
+  }//displayMemberList class
+  class ItemListOneColumn {//リストの一行を管理
+    constructor() {
+      this.li = document.createElement('li');
+      this.li.classList.add('memberList_li');
+      //セレクトボックス（メンバー名の追加）
+      const selectMember_tag = document.createElement('select');
+      selectMember_tag.classList.add('selectMember');
+        //セレクトボックスに追加する選択肢
+      for(var i=0;i<memberListArray.length;i++){
+        const optionMember_tag = document.createElement('option')
+        optionMember_tag.text = memberListArray[i];   //テキスト値
+        selectMember_tag.appendChild(optionMember_tag);
+      }
+      this.li.appendChild(selectMember_tag);
+      //金額入力項目の追加
+      const input_itemPrice = document.createElement('input');
+      input_itemPrice.classList.add('oneItemPrice');
+      input_itemPrice.placeholder = '金額'
+      this.li.appendChild(input_itemPrice);
+      });
+    }//constructor
+    getli(){
+      return this.li;
+    }//getli
+  }//MemberListOneColumn
+  const displayItemList = new DisplayItemList();
+  itemAddBtn.addEventListener('click', () => {
+    displayItemList.go();//アイテムを一覧に表示させる
+  })//memberAddBtn.click
+//テストボタン処理----------------------------------------------------------
+  const testBtn = document.getElementById('testBtn');
+  const selectMember = document.getElementsByClassName('selectMember')//該当の項目
+  testBtn.addEventListener('click',() => {
+    for(let item_j = 0; item_j < selectMember.length; item_j++){
+      var idx = selectMember[item_j].selectedIndex;       //インデックス番号を取得
+      var who  = selectMember[item_j].options[idx].text;//選ばれている人の名前
+        //一度セレクトボックスを空にしないと、メンバーがどんどん追加されてしまう。
+      for(let i = 0; i < selectMember[item_j].options.length + 100; i++) {
+          selectMember[item_j].options[0]=null
+        }
+        // セレクトボックスに新しい配列の内容を入れる
+        for(let i = 0; i < memberListArray.length; i++) {
+          const option_tag = document.createElement('option')
+          option_tag.text = memberListArray[i]
+          selectMember[item_j].appendChild(option_tag);
+        }
+        // もともとのテキストボックスの選択肢になるようにする
+      var options = document.getElementsByClassName('selectMember')[item_j].options;
+        for(var i = 0; i < options.length; i++){
+          console.log(options[i].text)
+          console.log(who)
+          if ( options[i].text === who ){
+            options[i].selected = true;
+            break;
+          };
+      };
+    }//項目の数だけループ
+  });
+}//javascript
 ```

htmlコードを追加

2019/09/03 05:14

投稿

rickey

スコア24

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -39,4 +39,85 @@
 (2)
 セレクトボックスの作成をクラス構文で行っているのですが、
 クラス構文に全く触れずに、別途関数を作って、セレクトボックスを削除して追加して強引にコードを書きました。
-クラス構文を利用して、これと同じことはできないでしょうか？
+クラス構文を利用して、これと同じことはできないでしょうか？
+```htmkl
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8">
+    <title>Tab Menu</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <div class="container">
+      <ul class="menu">
+        <li><a href="#" class="active" data-id="participant_tab"></a></li>
+        <li><a href="#" data-id="item_tab"></a></li>
+        <li><a href="#" data-id="result_tab"></a></li>
+      </ul>
+<!--1）参加者--------------------------------------------->
+      <section class="content active" id="participant_tab">
+        <div class="member_area">
+          <div class="subTitle">立て替えくれた人</div>
+          <div class="add_member_area">
+            <input type="text" id="memberName" placeholder="名前を入力">
+            <button id="memberAddBtn" class="disabled">追加</button>
+          </div>
+          <div class="member_list_table">
+          </div>
+          <ul id="memberList">
+            <div>主催者(削除不可)</div>
+<!--
+              <li class="memberList_li">
+              <button class="delMember">'x'</button>
+              <div class="div_memberName">名前</div>
+              </li>
+-->
+          </ul>
+        </div>
+      </section>
+<!--2）項目----------------------------------------------->
+      <section class="content" id="item_tab">
+        <div class="add_item_btn_area">
+          <div>立て替え項目</div>
+          <div id='itemBtnArea'>
+            <button id="itemAddBtn">項目を追加する</button>
+          </div>
+          <div class="add_item">
+            <ul id="itemList">
+<!--
+              <li>
+                <button class="delMember">×</button>
+                <select class="selectMember">
+                  <option>テスト</option>
+                  <option>テスト</option>
+                </select>
+                  <input class="oneItemName" placeholder="項目">
+                  <input class="oneItemPrice" placeholder="金額">
+              </li>
+-->
+            </ul>
+          </div>
+        </div>
+        <button id="testBtn">項目一覧のセレクトボックスに新しい参加者（配列）の名前を追加する</button>
+      </section>
+<!--3）計算結果----------------------------------------------->
+      <section class="content" id="result_tab">
+      </section>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
+```