From 0867c5524109ef61722d324ea64a7c6bd31fd9d8 Mon Sep 17 00:00:00 2001
From: Natalie Blumen <natalie.blumen@gmail.com>
Date: Thu, 26 Sep 2024 10:28:24 -0400
Subject: [PATCH] updated event detail section

---
 assets/js/events.js | 22 ++++++++++++----------
 index.html          |  2 +-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/assets/js/events.js b/assets/js/events.js
index 6bd6742..af6f0b9 100644
--- a/assets/js/events.js
+++ b/assets/js/events.js
@@ -14,6 +14,8 @@ document.addEventListener("DOMContentLoaded", function() {
     const eventContainer = document.getElementById("eventContainer");
     const row = document.getElementById("events-list");
     const eventModificationContainer = document.getElementById("event-modifications");
+
+    let eventHeader, eventMembers, eventExpenses;
     
     // function will display array of events
     function renderEvents() {
@@ -26,18 +28,20 @@ document.addEventListener("DOMContentLoaded", function() {
     
     // The event details will render here.  Currently there is just an H2 with the event name
     function renderEventDetails(eventName) {
-
-        const eventHeader = document.createElement("h2");
+        eventModificationContainer.innerHTML = "";
+        eventHeader = document.createElement("h2");
         eventHeader.textContent = `${eventName}`;
-        const eventMembers = document.createElement("h3");
+        
+        eventMembers = document.createElement("h3");
         eventMembers.textContent = "Members";
-        const eventExpenses = document.createElement("h3");
+        
+        eventExpenses = document.createElement("h3");
         eventExpenses.textContent = "Expenses";
-
+        
         eventModificationContainer.appendChild(eventHeader);
         eventModificationContainer.appendChild(eventMembers);
         eventModificationContainer.appendChild(eventExpenses);
-
+        
     }
     
     // Creates an individual event list item and a delete buttton
@@ -129,10 +133,8 @@ document.addEventListener("DOMContentLoaded", function() {
             renderEvents();
     
             // Deletes the innerHTML if the selected event is also deleted
-            if(eventHeader.innerText === event.name){
-                eventHeader.innerHTML = "";
-                eventMembers.innerHTML = "";
-                eventExpenses.innerHTML = "";
+            if(eventHeader.textContent === event.name){
+                eventModificationContainer.innerHTML = "";
             }
             
         });
diff --git a/index.html b/index.html
index a930a48..9f60bf3 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,6 @@ <h2>User Events</h2>
 
 
     <script src="assets/js/events.js"></script>
-    <script src="assets/js/natalie.js"></script>
+    <!-- <script src="assets/js/natalie.js"></script> -->
 </body>
 </html>
\ No newline at end of file