I'm doing my best to learn JS but I feel like I get stuck!
how can I toggle this kind of template class? I want to set the value {done} of "data-done" property to "true". Here is my code:
document.addEventListener('click', function(e) {
if (e.target.classList.contains('y row')) {
e.classList.toggle(data-done = 'true');
}
})[data-done='true'] {
color: red;
}<span class="y row" data-id="{id}" data-done="{done}" data-priority="{priority}">
{name} {priority}
</span>Syntax error e.classList.toggle(data-done = 'true');
data-done is not a class and you cannot have dashes without quoting and you do not use equal sign when you toggle or set attributes
Also you cannot use contains on two classes. Use .matches(".y.row")
This will toggle
document.addEventListener('click', function(e) {
const tgt = e.target;
if (tgt.matches('.y.row')) {
let done = tgt.dataset.done === "true";
tgt.dataset.done = !done;
}
})[data-done='true'] {
color: red;
}<span class="y row" data-id="{id}" data-done="true" data-priority="{priority}">
{name} {priority}
</span>