如何使用 .InnerHTML 方法放置特定的数组项

Question

好的，这是我运行关注的问题：我正在尝试创建一个基本数组来包含一周中每一天的菜单项，以显示在菜单板上。我一次只需要访问数组中的一项，并尝试使用 .innerHTML 方法将该项放入 HTML。但是，我运行遇到了一个问题，它不显示文本，除非我在我尝试访问的项目之前包含了数组项目。

我有 2 个 .js 文件与一个 HTML 文件协同工作。一个是菜单项的加载器，我有一个单独的数组 .js 文件，因为我希望将来任何人都可以轻松更新它，而不用担心他们会把代码弄乱。

例如：我尝试选择数组项“1”，但它不会显示，除非我在 HTML 中也将数组项“0”放在它前面。我会通过将 pizza2 编码为 HTML 中动态项的 ID 来表明我想要数组项“1”。本质上，如果不先有一个单独的 <p> 元素引用 pizza1，我就不能 select pizza2。

我对 JS 比较陌生，所以我不确定此时应该做什么来解决问题。这是我的代码：

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>

加载菜单的 js（包括 "console.log" 行以帮助确保它能够将 ID 与数组中的项目连接起来，它确实做到了）：

//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;
});
    ```

最后是简单的js数组菜单文件：

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"

]

感谢您的帮助！

Answer 1

只需获取当天并使用它从提供的列表中查找适当的菜单：

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>

如何使用 .InnerHTML 方法放置特定的数组项

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

html

javascript

arrays

innerhtml