是否可以在选中后取消选中任务？如果我检查任务，它会变成红色，但我想再次点击它，然后它会恢复正常。
有没有简单的方法来完成这个？
js
var takenLijst = document.getElementById('takenLijst');
var invulVeld = document.getElementById('invulVeld');
var voegToe = document.getElementById('voegToe');
var verwijderLijst = document.getElementById('verwijder');
var list = [];
voegToe.addEventListener('click', function() {
event.preventDefault();
takenLijst.innerHTML = '';
if (invulVeld.value !== '') {
list.push(invulVeld.value);
invulVeld.value = '';
}
for (var i=0; i < list.length; i++) {
takenLijst.innerHTML += '<li>' + list[i] + '</li>';
}
invulVeld.focus();
});
takenLijst.addEventListener('click', function() {
var taak = event.target;
if (taak.tagName === 'LI') {
taak.className = "checked";
}
});
verwijderLijst.addEventListener('click', function() {
list.length = 0;
takenLijst.innerHTML = '';
});
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To do list</title>
<link rel="stylesheet" type="text/css" href="/css/ToDo.css">
</head>
<body>
<form>
<input type="text" id="invulVeld"/><button id="voegToe">Taak</button><button id="verwijderLijst">Verwijder lijst</button>
</form>
<ul id="takenLijst">
</ul>
<script src="js/ToDo.js"></script>
</body>
</html>
最佳答案
只需检查checked 类是否已设置并将其删除。
takenLijst.addEventListener('click', function() {
var taak = event.target;
if (taak.tagName !== 'LI')
return;
if(taak.className == "checked") {
taak.className = "";
} else {
taak.className = "checked";
}
});
关于javascript - 取消选中要执行的元素javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30696581/