Duplicate HTML section with objects and buttons (js based)

plambertini
February 7, 2024
114 views
0 votes
2 Answers

I need to duplicate an HTML section of my index file. This section contain a section named tasks with some predefined lines, in every line there are 2 buttons to edit name & delete; i need to duplicate this section, also with some predefined lines. I’ve tried to dupliate the html section changing the "id" name of the section, but it did not work. I thought that since the content must be the same, it was sufficient to change the id name. however it doesn’t work. someone can help me? thanks in advance

THE HTML SECTION THAT I NEED TO DUPLICATE:

<script type="text/html" id="task-template">
  <div class="task-left">
    <input type="checkbox" id="" name="">
    <label for="" class="task-item"></label>
  </div>

  <div class="task-right">
    <button class="task-btn" name="edit" title="Edit this task"><i class="eos-icons">edit</i></button>
    <button class="task-btn" name="complete" title="Complete this task"><i class="eos-icons">done</i></button>
  </div>
</script>

<script type="text/html" id="task-edit-template">
  <div class="form-group">
    <div class="input-group">
      <input type="text" placeholder="Please enter some description">
      <button name="save" class="primary"><i class="eos-icons">save</i></button>
      <button name="cancel" class="warn"><i class="eos-icons">cancel</i></button>
    </div>
  </div>
</script>

THE RESPECTIVE SECTION IN JS FILE IS:

 init() {
      this.#element = document.createElement('div');
      this.#element.className = 'task';
      this.#element.innerHTML = document.querySelector('script#task-template').textContent;

      const inp = this.#element.querySelector('input');
      inp.id = `task-${this.#model.id}`;
      inp.name = inp.id;
      const lbl = this.#element.querySelector('label');
      lbl.htmlFor = inp.id;
      lbl.textContent = this.#model.description;

      const editBtn = this.#element.querySelector('.task-right button[name=edit]');
      let hdlr = new Handler('click', editBtn, () => this.edit());
      this.#handlers.push(hdlr);

      const compBtn = this.#element.querySelector('.task-right button[name=complete]');
      hdlr = new Handler('click', compBtn, () => this.complete());
      this.#handlers.push(hdlr);

      return this.#element;
    }

Tags: html javascript

Answers

you have to duplicate both parts, both HTML and JS

HTML

<!-- Original HTML -->
<script type="text/html" id="task-template">
  <!-- task template code -->
</script>

<script type="text/html" id="task-edit-template">
  <!-- task edit template code-->
</script>

<!-- Duplicated HTML -->
<script type="text/html" id="task-template-duplicate">
  <!-- duplicated task template code -->
</script>

<script type="text/html" id="task-edit-template-duplicate">
  <!-- duplicated task edit template code-->
</script>

JavaScript

// Original
init() {

  // Initialize the task element using the original template
  const template = document.querySelector('script#task-template').textContent;
  this.#element = document.createElement('div');
  this.#element.className = 'task';
  this.#element.innerHTML = template;

  // Initialize event handlers and other properties for the task element
  return this.#element;
}

// Duplicated

initDuplicate() {

  // Initialize the task element using the duplicated template
  const template = document.querySelector('script#task-template-duplicate').textContent;
  this.#element = document.createElement('div');
  this.#element.className = 'task';
  this.#element.innerHTML = template;

  // Initialize event handlers and other properties for the duplicated task element
  return this.#element;
}

I am not entirely sure about the context of your problem. You are using classes, objects and functions that are not defined in the code you provided. As I am not familiar with your specific class definition (and its private properties) I have prepared the following (simplified) snippet as a solution without using classes:

function newTask(id, name, descr) {
  const div = document.createElement('div');
  div.innerHTML = document.querySelector("#task-template").innerHTML;
  div.className="task";
  const [inp,lbl,ebtn,cbtn]="input,label,button[name=edit],button[name=complete]"
        .split(",").map(sel=>div.querySelector(sel));
  
  lbl.for = inp.name = inp.id = `task-${id}`;
  lbl.textContent=descr;
  
  ebtn.addEventListener("click",editTask);
  cbtn.addEventListener("click",completeTask);
  
  document.body.append(div);
}

// create some divs using the following data:
[[2,"start","Get started with a simple task."],[2,"go_on","Continue with another task."],
 [3,"finish","Finish it off with a final task."]]
 .forEach(t=>newTask(...t));
 
 function editTask(ev){console.log("edit",ev.target.closest(".task").querySelector("label").textContent)}
 function completeTask(ev){console.log("complete",ev.target.closest(".task").querySelector("label").textContent)}

<script type="text/html" id="task-template">
  <div class="task-left">
    <input type="checkbox">
    <label for="" class="task-item"></label>
  </div>
  <div class="task-right">
    <button class="task-btn" name="edit" title="Edit this task"><i class="eos-icons">edit</i></button>
    <button class="task-btn" name="complete" title="Complete this task"><i class="eos-icons">done</i></button>
  </div>
</script>

<script type="text/html" id="task-edit-template">
  <div class="form-group">
    <div class="input-group">
      <input type="text" placeholder="Please enter some description">
      <button name="save" class="primary"><i class="eos-icons">save</i></button>
      <button name="cancel" class="warn"><i class="eos-icons">cancel</i></button>
    </div>
  </div>
</script>

Please signup or login to give your own answer.

Click here to cancel reply.