Блог

Я также создаю веб-сайт для образовательных целей, но я получил некоторую ошибку, которую я не могу понять самостоятельно.

Я написал шаблон, подобный:

 <div class="row" style="height: 75%;" align="center" id="room-list">
  <template id="room-template" class="slide">
    <div class="col-md-4" id="left-item">
      <div class="panel panel-default panel-primary">
        <div class="panel-heading">
          <span id="room-type"></span>
        </div>
        <div class="panel-body">
          <div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
          <div id="utility">
            Utilities:
          </div>
          <div id="price">
            Price:
            <span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
            <span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
          </div>
        </div>
        <div class="panel-footer">
          <button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="center-item">
    <div class="panel panel-default panel-primary">
      <div class="panel-heading">
        <span id="room-type"></span>
      </div>
      <div class="panel-body">
        <div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
        <div id="utility">
          Utilities:
        </div>
        <div id="price">
          Price:
          <span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
          <span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="panel-footer">
        <button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
      </div>
    </div>
  </div> 
  <div class="col-md-4" id="right-item">
    <div class="panel panel-default panel-primary">
      <div class="panel-heading">
        <span id="room-type"></span>
      </div>
      <div class="panel-body">
        <div>
          <img id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;">
        </div>
        <div id="utility">
          Utilities:
        </div>
        <div id="price">
          Price:
          <span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
          <span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="panel-footer">
        <button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
      </div>
    </div>
  </div> 
  </template>
</div>
  

И я использую jquery, чтобы добавить этот шаблон к добавлению множества разделов с помощью template.

 var roomList = document.querySelector('template# room-list').content;
for (var i = 0; i < roomEntities.length; i  ) {
  var room = roomEntities[i];
  var price = priceEntities[i];
  var type = room.type;
  var thumbnail = room.thumbnail;
  var sale = price.sale;
  var original = price.original;

  for (var i = 0; i < 3; i  ) {
    var slt = "#center-item";
    if (i == 0) {
      slt = "#left-item";
    }
    else
      slt = "#right-item";
    var tpl = document.getElementById('room-template');
    tpl.querySelector(slt   '.panel-default .panel-heading #room-type').innerText = type;
    tpl.querySelector(slt   '.panel-body #thumbnail').attr('src') = thumbnail;
    tpl.querySelector(slt   '.panel-body #sale').innerText = sale;
    tpl.querySelector(slt  '.panel-body #original').innerText = original;
    roomList.appendChild(tpl.content.cloneNode(true));
  }
}
  

Но при этом всегда возвращается ошибка tpl.querySelector(slt '.panel-default .panel-heading #room-type').innerText = type; Cannot set property innerText of null , это означает, что не удается найти элемент в шаблоне.

Любой совет или рекомендация. Пожалуйста, помогите. Большое спасибо

Измените все селекторы в своем коде

    tpl.querySelector(slt   '.panel-default .panel-heading #room-type').innerText
    tpl.querySelector(slt   ' .panel-default .panel-heading #room-type').innerText