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

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

javascript html arrays

Javascript 如何使用.InnerHTML方法放置特定的数组项,javascript,html,arrays,innerhtml,Javascript,Html,Arrays,Innerhtml,好的，这里是我遇到的问题：我正在尝试创建一个基本数组，以包含一周中每天要显示在菜单板上的菜单项。我一次只需要访问数组中的一个项，并且正在尝试使用.innerHTML方法将该项放入HTML中。但是，我遇到了一个问题，除非我在试图访问的项之前包含了数组项，否则它不会显示文本我有2.js文件与一个HTML文件协同工作。一个是菜单项的加载器，我有一个单独的数组.js文件，因为我希望将来任何人都可以轻松地进行更新，而不用担心他们会将代码置诸脑后例如：我尝试选择数组项1，但它不会显示，除非我在HTML中

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

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

例如：我尝试选择数组项1，但它不会显示，除非我在HTML中将数组项0放在它之前。我将通过将pizza2编码为HTML中动态项的ID来表示我想要数组项1。本质上，如果没有一个单独的元素引用Pizza2，我就无法选择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数组菜单文件：

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"

]

谢谢你的帮助

只需获取当前日期并使用它从提供的列表中查找相应的菜单：

变量菜单= { 星期一：肉食爱好者比萨饼，星期二：烤蔬菜比萨饼，周三：芝士汉堡披萨，星期四：Mac和奶酪比萨饼，星期五：坦杜里鸡肉披萨，星期六：布氏鸡肉披萨，星期天：香肠披萨 }; var日期=新日期； var dayOfWeek=date.toLocaleDateStringen-gb，{weekday:'long'}； document.getElementByIdpizzaOfTheDay.innerHTML=菜单[dayOfWeek]；披萨火车站奶酪比萨饼

意大利香肠披萨

为什么要为数组元素创建额外的变量？e、 g.A0我使用的系统要求我在一周中的每一天都有一个单独的HTML文档，并且每个数组元素都可以轻松地作为变量选择，这样可以简化它，以确保放置正确的一天菜单项。至少，这是个主意。我愿意接受关于如何更有效地编码它的建议。那么，你为什么还要使用数组呢？我希望让其他人尽可能容易地编辑菜单。如果他们只需要替换数组中的文本，那么就不太可能出错。上面的html中pizza1等在哪里？这太棒了！非常感谢你。总体而言，这是一个简单得多的解决方案，简化了整个js。我很感激！整洁的解决方案！通过使用.getDate而不是.toLocaleDateStringen gb，{weekday:'long'}并使用普通数组作为菜单，可以实现进一步的简化，该菜单需要以星期天的特别菜单开始，但当前的菜单在可读性方面得分。@cars10m谢谢。我试图让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"

]