Bottom Screen Progress.

- Continued working on changing bottom screen content.

index.html

@@ -683,9 +683,7 @@
                   <div class="control-panel__button-display">
                     <div class="buttons button__depressed">
                       <div class="">
-                        <p class="button-text__embossed small-button">
+                        <p class="button-text__embossed small-button">glitches</p>
-                          glitches
-                        </p>
                       </div>
                     </div>
                     <div class="outer-edge__light-buttons buttons">

public/scripts/app.js

@@ -338,18 +338,10 @@ const changeBottomScreenContent = event => {
   let selectedTab = event.currentTarget.lastElementChild.firstElementChild.innerHTML.toLowerCase();
 
   const mainDisplayElements = document.getElementsByClassName("main-display");
-  const tabContentElements = document.getElementsByClassName(
+  const outputScreenElements = document.getElementsByClassName(
-    "ouput-display__wrapper"
+    "output-display__wrapper"
   );
 
-  for (let i = 0; i < tabContentElements.length; i++) {
-    if (tabContentElements[i].id === `video-screen__${selectedTab}`) {
-      tabContentElements[i].style.display = "flex";
-    } else {
-      tabContentElements[i].style.display = "none";
-    }
-  }
-
   for (let i = 0; i < mainDisplayElements.length; i++) {
     if (mainDisplayElements[i].id === `${selectedTab}-display__inner`) {
       mainDisplayElements[i].style.display = "flex";
@@ -357,6 +349,14 @@ const changeBottomScreenContent = event => {
       mainDisplayElements[i].style.display = "none";
     }
   }
+  
+  for (let i = 0; i < outputScreenElements.length; i++) {
+    if (outputScreenElements[i].id === `output-display__${selectedTab}`) {
+      outputScreenElements[i].style.display = "flex";
+    } else {
+      outputScreenElements[i].style.display = "none";
+    }
+  }
 };
 ////////////////////////