javascript - 将新的 id 元素添加到 div 类后，CSS 未加载

问题描述

首先改变的是我添加了两个新的 div 并为其分配了一个 id 类“order”和一个“menuOutput”。从那时起，我在 div id="menuOutput" 中的 CSS 就消失了。如何在不改变我的 js 代码工作方式的情况下恢复我的 CSS 样式？我知道新添加的 div 是问题，但请告诉我如何使用新代码保持我的样式？
<body>
<div id="order"></div>
<div id="menuOutput">
<h1 class="menu">Menu</h1>
  <div class="grid">
    <div class="two">
      <h2>Pizza by the slice ($2)</h2>
      <input type="number" id="qty_slice of pizza">
      <h2>Toppings</h2>
      <p class="titles">Per Pepperoni($0.25):</p> <input type="number" id="qty_pepperoni">
      <p class="titles">Per Meatball($0.35):</p> <input type="number" id="qty_meatballs">
      <p class="titles">Per Mushhroom($0.40):</p> <input type="number" id="qty_mushrooms">
      <p class="titles">Per Olive($0.20):</p> <input type="number" id="qty_olives">
    </div>

    <div class="one">
      <h2>Sides</h2>
      <p class="titles">Potato Salad($1.25):</p> <input type="number" id="qty_potato salad">
      <p class="titles">Humus($2.50):</p> <input type="number" id="qty_hummus">
      <p class="titles">Caesar Salad($3.50):</p> <input type="number" id="qty_caesar salad">
      <p class="titles">Garden Salad($2.25):</p> <input type="number" id="qty_garden salad">
    </div>

    <div class="three">
        <h2>Drinks</h2>
        <div>

          <p class="titles">Small Soda($1.95):</p> <input type="number" id="qty_small">
          <p class="titles">Medium Soda($2.20):</p> <input type="number" id="qty_medium">
          <p class="titles">Large Soda($2.50):</p> <input type="number" id="qty_large">
        </div><hr>
      <p class="titles">Juice($2.00):</p> <input type="number" id="qty_juice">
      <p class="titles">Water($1.25):</p> <input type="number" id="qty_water">

    </div>
 </div><br>
 </div>
<div class="button">
  <button type class="button" id="submitOrder">Review Order</button>
</div>
<div id="order"></div>
<script src="./run.js"></script>
</body>

 ------------------------------------JS---------------------------
 //get menu from api
 var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
  var status = xhr.status;
  if (status == 200) {
    callback(null, xhr.response);
  } else {
    callback(status);
  }
};
xhr.send();
};

/*
{
"menu": {
"slice of pizza": "2.00",
qty_slice of pizza
"toppings": {
  "pepperoni": ".25",
  "meatballs": ".35",
  "mushrooms": ".40",
  "olives": ".20"
 },
 "sides": {
  "potato salad": "1.25",
  "hummus": "2.50",
  "caesar salad": "3.50",
  "garden salad": "2.25"
  },
  "drinks": {
  "soda": {
    "small": "1.95",
    "medium": "2.20",
    "large": "2.50"
   },
  "juice": "2.00",
  "water": "1.25"
  }
 }
 }
*/

 getJSON('https://mm214.com/menu.php', function(err, data) {
 if (err != null) {
 alert('Something went wrong: ' + err);
 } else {

 var content = '';

 for (x in data.menu){
 if (typeof(data.menu[x]) == 'object'){
    for (y in data.menu[x]) {
        if (typeof(data.menu[x][y]) == 'object'){
            for (z in data.menu[x][y]) {
      content +=  z + ':' + data.menu[x][y][z] + '<input type="number" id = "qty_' + z + '"><br>';
            }
          }
            else {
      content += y + ':' + data.menu[x][y] + '<input type="number" id = "qty_' + y + '"><br>';
            }
        }//closes y in data

  }
  else 
  {
  content += x + ':' + data.menu[x] + '<input type="number" id = "qty_' + x + '"><br>';

  }//else for data.menu[x] if not an object
  }
  }//closes outer for loop

  //localStorage only stores strings! Stringify turns objects into strings!
  //parse converts JSON strings to objects that can be looped around

  document.getElementById("menuOutput").innerHTML = content;
  localStorage.setItem('order',JSON.stringify(data));
  console.log(a + ':' + order[a]);

  var order = JSON.parse(localStorage.getItem('order'));
  console.log(typeof(order));
  for (a in order){
  }

  });


  function storeOrder(){
   var pizzaqty = document.getElementById('qty_slice of pizza').value;
   localStorage.setItem('pizza',pizzaqty);
   var price  = pizzaqty * 2;


  }


  function retrieveOrder(){
    var pizzaordered = localStorage.getItem('pizza');


  }

  //output html
  //
  //document.getElementById("menuOutput").innerHTML = "Here is the menu: <br>" + data.menu;
  //why in't this working?

  //style menu for ordering
  //save order as json string
  //save in local storage
  //your order button

  //onclick: show order 
  document.getElementById('order').innerHTML = localStorage.getItem('order1');

------------------CSS------------------------------

 @import url('https://fonts.googleapis.com/css2? 
 family=Bangers&family=Bree+Serif&family=Chelsea+Market&family=Oswald:wght@300&display=swap');

 .grid {
 display: grid;
 grid-template-areas:
    "one two three"
    "one two three"
    "one two three";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: repeat(3, 165px);
 }

.title {
font-family: 'Chelsea Market', cursive;
font-size: 30px;
text-align: center;
color: teal;
}

input[type="number"] {
width: 40px;
}

.menu {
text-align: center;
}

.button {
text-align: center;
font-family: 'Bangers', cursive;
font-size: 25px;
 }

.titles {
font-family: 'Bree Serif', serif;
}

.pizza {
text-align: center;
color: tomato;
background-color: teal;
}

.one {
grid-area: one;
background-color: #008c45;
text-align: center;
}


.two {
text-align: center;
grid-area: two;
background-color: #f4f5f0;
color: black;
}

.three {
grid-area: three;
text-align: center;
background-color: #cd212a;
}

h2 {
font-size: 30px;
font-family: 'Oswald', sans-serif;
text-align: center;
}
标签： javascripthtmlcss
javascript - 将新的 id 元素添加到 div 类后，CSS 未加载

问题描述

解决方案

推荐阅读
