So I'm trying to reset it after it disappears from the screen with a button. I tried a document.write() but it doesn't work, So I try that after being used, to rewrite my template argue in my HTML so I can use it again with other datas. Is that even possible? This is my HTML:
<template id="playlist__screen">
<button class="backbutton" onclick="onClick()"></button>
<p class="playlist__type">{{style}}</p>
<h2 class='playlist__titre'>{{titre}}</h2>
<p class="playlist__desc">{{description}}</p>
</template>
Here is how you use a template
const plays = [{
"style": "Style 1",
"titre": "Titre 1",
"description": "Description 1"
},
{
"style": "Style 2",
"titre": "Titre 2",
"description": "Description 2"
},
{
"style": "Style 3",
"titre": "Titre 3",
"description": "Description 3"
}
];
window.addEventListener("DOMContentLoaded", function() {
const template = document.getElementById("template"),
content = document.getElementById("content");
plays.forEach(play => {
const playList = template.content.cloneNode(true);
playList.querySelector(".playlist__type").textContent = play.style;
playList.querySelector(".playlist__titre").textContent = play.Titre;
playList.querySelector(".playlist__desc").textContent = play.description;
content.appendChild(playList);
})
content.addEventListener("click", function(e) {
if (e.target.classList.contains("backbutton")) {
console.log("back clicked");
}
})
});<div id="content"></div>
<template id="template">
<div class="playlist__screen">
<button class="backbutton">Back</button>
<p class="playlist__type"></p>
<h2 class="playlist__titre"></h2>
<p class="playlist__desc"></p>
</div>
</template>