Finally Fix newMember btn problem!!!! /

Start work on last memberRow removal bug / Start work on empty submit bug
Ali-Sdg90 · Jan 17, 2024 · 201fc3a · 201fc3a
1 parent 832f9d5
commit 201fc3a
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 34 deletions.
diff --git a/JS/addNewMember.js b/JS/addNewMember.js
diff --git a/JS/addNewMember.js.map b/JS/addNewMember.js.map
diff --git a/JS/convertInput.js b/JS/convertInput.js
diff --git a/JS/convertInput.js.map b/JS/convertInput.js.map
diff --git a/JS/index.js b/JS/index.js
diff --git a/JS/index.js.map b/JS/index.js.map
diff --git a/JS/memberActionBtns.js b/JS/memberActionBtns.js
diff --git a/JS/memberActionBtns.js.map b/JS/memberActionBtns.js.map
diff --git a/TS/addNewMember.ts b/TS/addNewMember.ts
@@ -45,50 +45,47 @@ const addNewMemberForm = () => {
             ).value;
 
             if (memberName && memberID) {
-                const newMemberIndex = memberBits.length;
-
                 const newMemberHTML = `
                     <div class="member-info">
-                        <div class="member-index">${newMemberIndex + 1}</div>
+                        <div class="member-index">${memberBits.length + 1}</div>
                         <div>-</div>
                         <div class="member-name">${memberName}</div>
                         <div class="member-id">${memberID}</div>
                     </div>
                 
                     <div class="action-btns">
-                        <div class="action-btn add-to-end-${newMemberIndex}"></div>
-                        <div class="action-btn delete-member-${newMemberIndex}"></div>
+                        <div class="action-btn add-to-end-${memberCounter}"></div>
+                        <div class="action-btn delete-member-${memberCounter}"></div>
                     </div>
                 `;
 
                 const tempDiv = document.createElement("div");
-                tempDiv.classList.add(`member-row-${newMemberIndex}`);
+                tempDiv.classList.add(`member-row-${memberCounter}`);
                 tempDiv.innerHTML = newMemberHTML;
                 editList.appendChild(tempDiv);
 
                 // New member btn addEventListeners
+                const memberNumber = memberCounter;
+
                 (
                     document.querySelector(
-                        `.add-to-end-${newMemberIndex}`
+                        `.add-to-end-${memberNumber}`
                     ) as HTMLElement
                 ).addEventListener("click", () => {
-                    addMemberToEnd(newMemberIndex);
+                    addMemberToEnd(memberNumber);
                 });
 
                 (
                     document.querySelector(
-                        `.delete-member-${newMemberIndex}`
+                        `.delete-member-${memberNumber}`
                     ) as HTMLElement
                 ).addEventListener("click", () => {
-                    deleteMember(newMemberIndex);
+                    deleteMember(memberNumber);
                 });
 
-                memberBits.push([
-                    `${newMemberIndex + 1}-`,
-                    memberName,
-                    memberID,
-                ]);
+                memberBits.push([`${memberNumber + 1}-`, memberName, memberID]);
 
+                memberCounter++;
                 rerenderAddMember();
                 updateIndexes();
             }

diff --git a/TS/convertInput.ts b/TS/convertInput.ts
@@ -36,6 +36,8 @@ const convertInputToEditableList = () => {
                 </div>
             </div>
         `;
+
+        memberCounter++;
     }
 
     // Add eventListener to each btn