CODEWITHSUNDEEP
javascripthtmldomevent-handlingtemplatetags
Thomas Bengtsson
Thomas Bengtsson

Reputation: 399

template-div clones into same template javascript

I have a problem with cloned templates cloning into the same template. I have a main-template and two sub-templates. I want to be able to open one sub-template within one main-template on event and another sub-template to open in another main-template on a second event. But right now they are opening in the same main-template on every event. Main-template:

<main>
  <div id="wrapper">

    <template class="myTemplate">
      <div class="dragdiv">
        <div class="dragdivheader">Main template</div>
          <div class="windowContent">

          </div>
      </div>
    </template>

  </div>
</main>

First sub-template:

<template>
  <div class="memory">                      
    <a href="#"><img src="image/0.jpeg" alt="A brick"></a>
  </div>
</template>

Second sub-template:

<template class="chatBox">
  <div class="chat">
    <div class="messages">
      <template>
        <div class="message">
          <p class="author"></p>
          <p class="text"></p> 
        </div>
      </template>
    </div>
    <div id="messageArea">
      <textarea class="messageArea"></textarea>
      <input type="button" class="send" value="Send" />
    </div>
  </div>
</template>

The eventlistensers:

document.querySelector('#memoryLauncher').onclick = function () {
  let container = document.querySelector('#wrapper')
  let mainTemplate = 
  document.querySelectorAll('template'[0].content.firstElementChild
  let div = document.importNode(mainTemplate, true)
  container.appendChild(div)

  startMemory(4, 4)
}

document.querySelector('#chatLauncher').onclick = function () {
  let container = document.querySelector('#wrapper')
  let mainTemplate = 
  document.querySelectorAll('template'[0].content.firstElementChild
  let div = document.importNode(mainTemplate, true)
  container.appendChild(div)

  let chat = new Chat(document.querySelector('.windowContent'))
  chat.connect().then(function (socket) {
  })
}

Upvotes: 0

Views: 80

Answers (1)

Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

You need to call importNode on the "main" template and "sub" template. Next, append the subTemplate to the mainTemplate node. Finally this needs to be appended to the #wrapper div.

I also moved the templates out of the #wrapper div, because I assume #wrapper is where you'll be creating all your elements. My code below:

document.querySelector('#memoryLauncher').onclick = function () {
  let templates = document.querySelectorAll('template');
  let mainTemplate =   templates[0].content.firstElementChild;
  let mainNode = document.importNode(mainTemplate, true);

  let subTemplate = templates[1].content.firstElementChild;
  let div = document.importNode(subTemplate, true);
  mainNode.appendChild(div);

  let container = document.querySelector('#wrapper')
  container.appendChild(mainNode);

  startMemory(4, 4)
}

document.querySelector('#chatLauncher').onclick = function () {
  let templates = document.querySelectorAll('template');
  let mainTemplate =   templates[0].content.firstElementChild;
  let mainNode = document.importNode(mainTemplate, true);

  let subTemplate = templates[2].content.firstElementChild;
  let div = document.importNode(subTemplate, true);
  mainNode.appendChild(div);

  let container = document.querySelector('#wrapper');
  container.appendChild(mainNode);


  let chat = new Chat(document.querySelector('.windowContent'))
  chat.connect().then(function (socket) {
  })
}

Upvotes: 2

Related Questions