我如何在 innerHTML 上使用 javascript 和 css 文件

Question

我正在使用 node 开发 Web 应用程序，但遇到了问题。 我想用下面的代码做的是在点击“RESERVAR”并放入我的HTML（.ejs）文件后加载后端的信息。 问题是 HTML 代码在 HTML 文件上运行良好，但是当我将它传输到 js 文件时，为了添加后端信息，代码没有按预期运行，因为它需要一些 js 和 CSS 文件才能运行。 因为我的 js 文件不支持；

 <link rel="stylesheet" type="text/css" href="../css/timedropper.css">
      <script src="../js/back-comunication.js"></script>   

它似乎没有正确加载输入。

我的应用网站： https : //labmanagersite.herokuapp.com/

在我的 js 文件上的代码下面，我试图在我的 HTML 文件中插入 HTML 段。

async function openReserva(id) {
  let endereco = `https://lab-manager.herokuapp.com/laboratorio/${id}`;
  const response = await fetch(endereco);
  const user = await response.json();
  document.querySelector(".reserva").innerHTML = `
      <div class="reserva-container">
      <div class="reserva-header">
        <h1>${user[0].nome}</h1>
        <p>${user[0].descricao} / ${user[0].capacidade} computadores</p>
        <i class="far fa-times-circle"></i>
      </div>
      <div class="reserva-inputs">                  
        <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked>
            <label class="onoffswitch-label" for="myonoffswitch">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>            
        <div class="input-containers data-container"  style="max-width: 100% !important;">
            <div class="icon">
              <i class="far fa-calendar-alt"></i>
            </div>   
            <input id="input-data2" class="input-data" value="0"   
              type="text" data-lang="pt" data-large-mode="true" 
              data-large-default="true" data-lock="from" 
              data-translate-mode="true" data-theme="my-style" 
              data-format="d/m/Y" data-max-year="2050" data-min-year="2000"/>                 
              <div class="select_mate" data-mate-select="active" id="select-date">
                  <select onclick="return false;" onchange="" onclick="return false;" id="">
                    <option value="0">Domingo</option>
                    <option value="1">Segunda</option>
                    <option value="2">Terça</option>
                    <option value="3">Quarta</option>
                    <option value="4">Quinta</option>
                    <option value="5">Sexta</option>
                    <option value="6">Sabado</option>                           
                  </select>
                  <p class="selecionado_opcion" onclick="open_select(this)"></p>
                  <span onclick="open_select(this)" class="icon_select_mate">
                    <svg fill="#FF9F2E" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" />
                        <path d="M0-.75h24v24H0z" fill="none" />
                    </svg>
                  </span>
                  <div class="cont_list_select_mate">
                    <ul class="cont_select_int"> </ul>
                  </div>
              </div>
        </div>
        <div class="input-containers horario-container" style="max-width: 100% !important;">
            <div class="icon">
              <i class="far fa-clock"></i>
            </div>
            <div class="select_mate" data-mate-select="active" >
              <select onclick="return false;" onchange="" onclick="return false;" id="">
                  <option value="0">01:00</option>
                  <option value="1">02:00</option>
                  <option value="2">03:00</option>
                  <option value="3">04:00</option>
                  <option value="4">05:00</option>
                  <option value="5">06:00</option>
                  <option value="6">07:00</option>
                  <option value="7">08:00</option>
                  <option value="8">09:00</option>
                  <option value="9">10:00</option>
              </select>
              <p class="selecionado_opcion" onclick="open_select(this)"></p>
              <span onclick="open_select(this)" class="icon_select_mate">
                  <svg fill="#FF9F2E" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" />
                    <path d="M0-.75h24v24H0z" fill="none" />
                  </svg>
              </span>
              <div class="cont_list_select_mate">
                  <ul class="cont_select_int"> </ul>
              </div>
            </div>
        </div>               
      </div>            
      <div class="buttons">
        <button>Reservar</button>
      </div>                        
    </div>    
  `;
  const exit = document.querySelector(".reserva-header i");
  let reservaOpen = true;
  exit.addEventListener("click", () => {
    if (reservaOpen) {
      document.querySelector(".reserva").innerHTML = ``;
    }
  });
}

Answer 1

我不太明白你的问题，但是为什么不使用innerHTML，而是隐藏reserve-container div，而你唯一要做的就是当用户点击时，调用css函数来显示整个div？ 使用 jquery 将是这样的。

$(".reserva").on("click", function () {
    $(".reserva-container").eq(0).css("display", "block/inline/flex/grid/...")
});