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;
}
2
Answers
you have to duplicate both parts, both HTML and JS
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: