JavaScript中的待办事项列表-删除任务后，您可以'；不要正确地选择另一个
这是我的第一个大项目，我正在列一个待办事项清单，到目前为止一切都进展顺利，但我刚刚注意到一个非常不愉快的问题。 所以，我决定通过点击来编辑一个任务，你可以选择上下移动，重命名，甚至删除。我测试了delete功能，结果发现它不能按预期工作。 当我想第一次删除任务时，一切都很好。 单击任务后，此菜单打开： 瞧！任务结束了。让我们移走另一个。喜欢例如，下一个。 然而，正如你所看到的。。。 总之，删除一项任务后，再次尝试删除任务会导致无法正确选择所需的任务。您使用的不是所选任务，而是随后的任务。为什么会这样？感谢您的帮助！提前谢谢JavaScript中的待办事项列表-删除任务后，您可以'；不要正确地选择另一个,javascript,list,Javascript,List,这是我的第一个大项目，我正在列一个待办事项清单，到目前为止一切都进展顺利，但我刚刚注意到一个非常不愉快的问题。 所以，我决定通过点击来编辑一个任务，你可以选择上下移动，重命名，甚至删除。我测试了delete功能，结果发现它不能按预期工作。 当我想第一次删除任务时，一切都很好。 单击任务后，此菜单打开： 瞧！任务结束了。让我们移走另一个。喜欢例如，下一个。 然而，正如你所看到的。。。 总之，删除一项任务后，再次尝试删除任务会导致无法正确选择所需的任务。您使用的不是所选任务，而是随后的任务。为什么会
var everyTask = document.querySelectorAll('.regTask');
for (var q = 0; q < everyTask.length; q++) {
everyTask[q].addEventListener('click', ((h) => {
return function() {
rememberThisTaskValue = h;
}
})(q))
}
var allTasks = document.getElementsByClassName('regTask');
for (var b = 0; b < allTasks.length; b++) {
allTasks[b].onclick = function() {
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgb(255, 255, 255)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgb(255, 255, 255)';
}
alert(rememberThisTaskValue);
temporaryLayer.style.animation = 'layerFadeIn 0.18s forwards';
temporaryLayer.style.background = 'rgba(0, 0, 0, 0.5)';
temporaryLayer.style.backdropFilter = 'blur(6px)';
body.appendChild(temporaryLayer);
var editor = document.createElement('div');
var editorTitle = document.createElement('h1');
var editorTitleNode = document.createTextNode('Edit task');
var editorSubTitle = document.createElement('h2');
// Styling
var editorSubTitleTextNodeContent = document.getElementsByClassName('regTask')[rememberThisTaskValue].innerHTML;
var editorSubTitleNode = document.createTextNode(editorSubTitleTextNodeContent);
var editorOptions = document.createElement('div');
var editorOptionsInput = document.createElement('input');
var editorOptionsDelete = document.createElement('button');
var editorOptionsDeleteNode = document.createTextNode('Delete');
var editorOptionsMove = document.createElement('button');
var editorOptionsMoveNode = document.createTextNode('Move');
var editorOptionsRename = document.createElement('button');
var editorOptionsRenameNode = document.createTextNode('Rename');
var editorOptionsCancel = document.createElement('button');
var editorOptionsCancelNode = document.createTextNode('Cancel');
// Styling
temporaryLayer.appendChild(editor);
editor.appendChild(editorTitle);
editorTitle.appendChild(editorTitleNode);
editor.appendChild(editorSubTitle);
editorSubTitle.appendChild(editorSubTitleNode);
editor.appendChild(editorOptions);
editorOptions.appendChild(editorOptionsRename);
editorOptionsRename.appendChild(editorOptionsRenameNode);
editorOptions.appendChild(editorOptionsMove);
editorOptionsMove.appendChild(editorOptionsMoveNode);
editorOptions.appendChild(editorOptionsDelete);
editorOptionsDelete.appendChild(editorOptionsDeleteNode);
editorOptions.appendChild(editorOptionsCancel);
editorOptionsCancel.appendChild(editorOptionsCancelNode);
editorOptionsCancel.onclick = function() {
// There is some styling here too but I am going to leave it just in case
editor.style.animation = 'editorFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
editor.remove();
temporaryLayer.remove();
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgba(255, 255, 255, 0.7)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgba(255, 255, 255, 0.7)';
}
}, 180)
}
editorOptionsDelete.onclick = function() {
// This is the function that deletes a task
document.getElementsByClassName('regTask')[rememberThisTaskValue].remove();
var everyTask = document.querySelectorAll('.regTask');
for (var q = 0; q < everyTask.length; q++) {
everyTask[q].addEventListener('click', ((h) => {
return function() {
var rememberThisTaskValue = h;
}
})(q))
}
editor.style.animation = 'editorFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
editor.remove();
temporaryLayer.remove();
}, 180)
}
editorOptionsRename.onclick = function() {
editor.style.animation = 'editorFadeOut 0.18s forwards';
setTimeout (function() {
editor.remove();
}, 180)
var nameChanger = document.createElement('div');
nameChanger.style.opacity = '0';
nameChanger.style.animation = "renameFadeIn 0.18s forwards";
var nameChangerTitle = document.createElement('h1');
var nameChangerTitleNode = document.createTextNode('Rename Task');
var nameChangerForm = document.createElement('form');
var nameChangerFormInput = document.createElement('input');
var nameChangerFormSubmit = document.createElement('button');
var nameChangerFormSubmitNode = document.createTextNode('Rename');
var nameChangerFormCancel = document.createElement('button');
var nameChangerFormCancelNode = document.createTextNode('Cancel');
// Styling
temporaryLayer.appendChild(nameChanger);
nameChanger.appendChild(nameChangerTitle);
nameChangerTitle.appendChild(nameChangerTitleNode);
nameChanger.appendChild(nameChangerForm);
nameChangerForm.appendChild(nameChangerFormInput);
nameChangerForm.appendChild(nameChangerFormSubmit);
nameChangerFormSubmit.appendChild(nameChangerFormSubmitNode);
nameChangerForm.appendChild(nameChangerFormCancel);
nameChangerFormCancel.appendChild(nameChangerFormCancelNode);
document.getElementById('taskRenameField').focus();
nameChangerFormCancel.onclick = function() {
event.preventDefault();
nameChanger.style.opacity = '1';
nameChanger.style.animation = 'changerFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
nameChanger.remove();
temporaryLayer.remove();
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgba(255, 255, 255, 0.7)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgba(255, 255, 255, 0.7)';
}
}, 180)
}
nameChangerFormSubmit.onclick = function() {
event.preventDefault();
if (!(nameChangerFormInput.value === "" || (!nameChangerFormInput.value.replace(/\s/g, '').length))) {
var taskReminder = nameChangerFormInput.value.replace(/\s+/g, " ").trim();
document.getElementsByClassName('regTask')[rememberThisTaskValue].innerHTML = taskReminder;
nameChanger.style.opacity = '1';
nameChanger.style.animation = 'changerFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
nameChanger.remove();
temporaryLayer.remove();
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgba(255, 255, 255, 0.7)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgba(255, 255, 255, 0.7)';
}
}, 180)
}
}
}
editorOptionsMove.onclick = function() {
// This is the function that lets the user move elements but it's still unfinished, I barely started it
editor.style.animation = 'editorFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
stipText.style.animation = 'tipFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
editor.remove();
temporaryLayer.remove();
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgba(255, 255, 255, 0.7)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgba(255, 255, 255, 0.7)';
}
}, 180)
// Switch by clicking second task.
}
}
}
var everyTask=document.querySelectorAll（'.regTask'）；
对于（var q=0；q{
返回函数（）{
rememberThisTaskValue=h；
}
})（q） )
}
var allTasks=document.getElementsByClassName（'regTask'）；
for（var b=0；bfunction editTasks() {
var everyTask = document.querySelectorAll('.regTask');
for (var q = 0; q < everyTask.length; q++) {
everyTask[q].addEventListener('click', ((h) => {
return function() {
rememberThisTaskValue = h;
}
})(q))
}
var allTasks = document.getElementsByClassName('regTask');
for (var b = 0; b < allTasks.length; b++) {
allTasks[b].onclick = function() {
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgb(255, 255, 255)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgb(255, 255, 255)';
}
alert(rememberThisTaskValue);
temporaryLayer.style.animation = 'layerFadeIn 0.18s forwards';
temporaryLayer.style.background = 'rgba(0, 0, 0, 0.5)';
temporaryLayer.style.backdropFilter = 'blur(6px)';
body.appendChild(temporaryLayer);
var editor = document.createElement('div');
var editorTitle = document.createElement('h1');
var editorTitleNode = document.createTextNode('Edit task');
var editorSubTitle = document.createElement('h2');
// Styling
var editorSubTitleTextNodeContent = document.getElementsByClassName('regTask')[rememberThisTaskValue].innerHTML;
var editorSubTitleNode = document.createTextNode(editorSubTitleTextNodeContent);
var editorOptions = document.createElement('div');
var editorOptionsInput = document.createElement('input');
var editorOptionsDelete = document.createElement('button');
var editorOptionsDeleteNode = document.createTextNode('Delete');
var editorOptionsMove = document.createElement('button');
var editorOptionsMoveNode = document.createTextNode('Move');
var editorOptionsRename = document.createElement('button');
var editorOptionsRenameNode = document.createTextNode('Rename');
var editorOptionsCancel = document.createElement('button');
var editorOptionsCancelNode = document.createTextNode('Cancel');
// Styling
temporaryLayer.appendChild(editor);
editor.appendChild(editorTitle);
editorTitle.appendChild(editorTitleNode);
editor.appendChild(editorSubTitle);
editorSubTitle.appendChild(editorSubTitleNode);
editor.appendChild(editorOptions);
editorOptions.appendChild(editorOptionsRename);
editorOptionsRename.appendChild(editorOptionsRenameNode);
editorOptions.appendChild(editorOptionsMove);
editorOptionsMove.appendChild(editorOptionsMoveNode);
editorOptions.appendChild(editorOptionsDelete);
editorOptionsDelete.appendChild(editorOptionsDeleteNode);
editorOptions.appendChild(editorOptionsCancel);
editorOptionsCancel.appendChild(editorOptionsCancelNode);
editorOptionsCancel.onclick = function() {
// There is some styling here too but I am going to leave it just in case
editor.style.animation = 'editorFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
editor.remove();
temporaryLayer.remove();
document.getElementsByClassName('regTask')[rememberThisTaskValue].style.background = 'rgba(255, 255, 255, 0.7)';
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseover = function() {
this.style.background = 'rgb(255, 255, 255)';
}
document.getElementsByClassName('regTask')[rememberThisTaskValue].onmouseout = function() {
this.style.background = 'rgba(255, 255, 255, 0.7)';
}
}, 180)
}
editorOptionsDelete.onclick = function() {
document.getElementsByClassName('regTask')[rememberThisTaskValue].remove();
var nodes = listTaskViewer.childNodes;
for (var j = 0; j < nodes.length; j++) {
nodes[j].setAttribute('class', 'newSavedTask regTask');
nodes[j].style.animation = 'none';
nodes[j].style.opacity = '1';
}
localStorage.setItem("taskListSave", listTaskViewer.innerHTML);
listTaskViewer.innerHTML = 'none';
var theTasks = document.querySelectorAll('.regTask');
for (var s = 0; s < theTasks.length; s++) {
theTasks[s].style.animation = 'none';
}
listTaskViewer.innerHTML = localStorage.getItem("taskListSave");
for (var y = 0; y < savedTasks.length; y++) {
savedTasks[y].onmouseover = function() {
this.style.background = 'rgba(255, 255, 255, 1)';
}
savedTasks[y].onmouseout = function() {
this.style.background = 'rgba(255, 255, 255, 0.7)';
}
editTasks();
}
var everyTask = document.querySelectorAll('.regTask');
for (var q = 0; q < everyTask.length; q++) {
everyTask[q].addEventListener('click', ((h) => {
return function() {
var rememberThisTaskValue = h;
}
})(q))
}
editor.style.animation = 'editorFadeOut 0.18s forwards';
temporaryLayer.style.animation = 'layerFadeOut 0.18s forwards';
stipText.style.animation = 'tipFadeIn 0.18s forwards';
setTimeout (function() {
temporaryLayer.style.animation = 'none';
temporaryLayer.style.background = 'none';
temporaryLayer.style.backdropFilter = 'none';
editor.remove();
temporaryLayer.remove();
}, 180)
}
...
}