Template tag in HTML: querySelector just return null value

Question

I am making a website for education purpose as well, but I got some error that I cant figure out by myself.

I wrote a template like:

<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>

And I use jquery to add that template to a append a lot of divs by using 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));
  }
}

But it always returns error at tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type; it said Cannot set property innerText of null, it mean cannot find the element in template.

Any advice or recommended. Please help. Many thanks

Answer 1

Change all Selectors in your Code

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