How do you place a specific array item using .InnerHTML method

Okay, here's the issue I'm running into: I am attempting to create a basic array to contain menu items for each day of the week to display on a menuboard. I need to access only one item from the array at a time, and am attempting to use the .innerHTML method to place the item into the HTML. However, I am running into an issue where it doesn't show the text unless I have included the array items preceding the item I am attempting to access.

I have 2 .js files working in tandem with an HTML file. One is the loader for the menu items and I have a separate .js file for the array since I wanted it to be easy for anyone to update in the future without fear of them scrambling the code into oblivion.

For example: I try to choose the array item "1", but it doesn't display unless I also place array item "0" before it in the HTML. I would indicate that I want array item "1" by coding pizza2 as the ID for dynamic item in the HTML. Essentially, I cannot select pizza2without first having a separate <p> element referencing pizza1prior to it.

I am relatively new to JS, so I'm not sure what to do at this point to troubleshoot. Here's my code:

The HTML:


link rel="stylesheet" href="pizza.css">
<link href="https://fonts.googleapis.com/css?family=Rye|Bitter&display=swap" rel="stylesheet">
<script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"></script>

<!--Forces Cache Clear-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

</head>

<body>

<!--Body-->
<section class="pizza_menu">
    <h1>Pizza</h1>
    <h1 style="line-height: 0.05em">Station</h1>
  <div class="items">
  <p>Cheese Pizza</p>
  <p>Pepperoni Pizza</p>
<!--Dynamic Menu Item-->
  <p id="pizza2"></p>
</div>
</section>

<!--Video Background-->
<section class="background">
  <video autoplay muted loop>
    <source src="https://corinthdesign.com/private/HTML_menuboards/media/pizza.mp4" type="video/mp4">
  </video>
</section>

  <script src="menus/pizzaMenu.js"></script>
  <script src="js/menuLoader.js"></script>
</body>

The js to load the menu (including "console.log" lines to help ensure that it is able to connect the ID's with the items in the array, which it does):

//MONDAY
var a0 = menu[0]
//TUESDAY
var b1 = menu[1]
//WEDNESDAY
var c2 = menu[2]
//THURSDAY
var d3 = menu[3]
//FRIDAY
var e4 = menu[4]
//SATURDAY
var f5 = menu[5]
//SUNDAY
var g6 = menu[6]

$(document).ready(function menuLoader() {
  console.log(menu[0]);
  console.log(menu[1]);
  console.log(menu[2]);
  console.log(menu[3]);
  console.log(menu[4]);
  console.log(menu[5]);
  console.log(menu[6]);

/////////Below code places menu items///////////
//Monday
  document.getElementById("pizza1").innerHTML = a0;
  document.getElementById("pizza2").innerHTML = b1;
  document.getElementById("pizza3").innerHTML = c2;
  document.getElementById("pizza4").innerHTML = d3;
  document.getElementById("pizza5").innerHTML = e4;
  document.getElementById("pizza6").innerHTML = f5;
  document.getElementById("pizza7").innerHTML = g6;
});
    ```

Finally, the simple js array menu file:

var menu = [

//Monday Lunch and Dinner Special
  "Meat Lover's Pizza",
//Tuesday Lunch and Dinner Special
  "Grilled Vegetable Pizza",
//Wednesday Lunch and Dinner Special
  "Cheeseburger Pizza",
//Thursday Lunch and Dinner Special
  "Mac and Cheese Pizza",
//Friday Lunch and Dinner Special
  "Tandoori Chicken Pizza",
//Saturday Lunch and Dinner Special
  "Chicken Bruschetta Pizza",
//Sunday Lunch and Dinner Special
  "Sausage Pizza"

]

Thanks for any assistance!

Solution

Simply get the current day and use that to look up the appropriate menu from the list provided:

var menu =
{ 
  "Monday" : "Meat Lover's Pizza",
  "Tuesday" : "Grilled Vegetable Pizza",
  "Wednesday" : "Cheeseburger Pizza",
  "Thursday" : "Mac and Cheese Pizza",
  "Friday" : "Tandoori Chicken Pizza",
  "Saturday" : "Chicken Bruschetta Pizza",
  "Sunday" : "Sausage Pizza"
};


var date = new Date();
var dayOfWeek = date.toLocaleDateString("en-gb", { weekday: 'long' });  

document.getElementById("pizzaOfTheDay").innerHTML = menu[dayOfWeek];

<!--Body-->
<section class="pizza_menu">
    <h1>Pizza</h1>
    <h1 style="line-height: 0.05em">Station</h1>
  <div class="items">
  <p>Cheese Pizza</p>
  <p>Pepperoni Pizza</p>
<!--Dynamic Menu Item-->
  <p id="pizzaOfTheDay"></p>
</div>
</section>

<!--Video Background-->
<section class="background">
  <video autoplay muted loop>
    <source src="https://corinthdesign.com/private/HTML_menuboards/media/pizza.mp4" type="video/mp4">
  </video>
</section>