为啥我的保存功能没有完全执行？
Posted
技术标签:
【中文标题】为啥我的保存功能没有完全执行？【英文标题】：Why is my save function not executing in its entirety?为什么我的保存功能没有完全执行？ 【发布时间】：2022-01-20 19:14:51 【问题描述】：我正在尝试用 html、CSS 和纯 JS 创建一个待办事项列表。
const dSubmit = document.getElementById('submit');
const storeData = [];
let typer = document.getElementById('type');
let input = document.getElementById('text');
const list = document.getElementById('listHolder');
dSubmit.addEventListener("click", (e) =>
e.preventDefault();
if (input.value == "")
typer.innerHTML = "Please enter a task";
else
typer.innerHTML = "";
store();
);
function store()
const tData = document.getElementById('text').value;
storeData.push(tData);
updater();
input.value = "";
function deleter (index)
storeData.splice(index, 1);
updater();
function updater()
let htmlCode = "";
storeData.forEach(function(item, index)
htmlCode += "<div class='test'><div id = "+ index +">" + item + "</div><div class='sideBtn'><button type='button' class='edit' onClick= 'editF("+ index +")'>Edit</button><button class='delBtn' onClick= 'deleter("+ index +")'>Delete</button> </div> </div>"
)
list.innerHTML = htmlCode;
function editF (index)
let tempOne = document.getElementById(index);
let tempTwo = "<input id='inputText"+String(index)+"' type='text' name='task' value ='" + String(storeData[index]) + "'><button id='saveText"+String(index)+"' onClick= 'save("+index+")' >Save</button>"
tempOne.innerHTML = tempTwo;
function save (index)
console.log('test1')
let tempOne= document.getElementById('saveText'+String(index));
let tempTwo = document.getElementById('inputText'+String(index));
console.log('test2')
tempOne.addEventListener("click", function foo ()
console.log('test3')
storeData.splice(index,1,tempTwo.value)
updater()
)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>To Do List</title>
</head>
<body>
<h1>To-do-list</h1>
<form>
<label for="task">Please enter item:</label>
<input type="text" name="task" id="text">
<button id="submit">Submit</button>
</form>
<div id='type'></div>
<div>List:</div>
<div id="listHolder" class="test"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>我遇到了保存功能的问题。如果我编辑待办事项列表中的项目并单击保存按钮，则该函数将执行到 console.log('test2') 为止。如果我再次单击保存，该函数将完整执行。
我想问为什么第一次点击导致执行保存功能直到'test2'？
另外，有人愿意批评我的 JS 吗？有什么急需改进的地方吗？还是有更实用/有效的方法来编写我的 JS 代码？
提前感谢您的帮助。
【问题讨论】：
【参考方案1】：在“test2”日志之后，您将添加一个事件侦听器，其余代码位于侦听器块内。侦听器块中的代码仅在该侦听器收到“点击”事件后才会执行，这就是它第二次工作的原因。
【讨论】：
谢谢，我已经一起删除了事件监听器，所以当点击编辑按钮时保存功能会执行，吸取教训。以上是关于为啥我的保存功能没有完全执行？的主要内容，如果未能解决你的问题，请参考以下文章