我正在制作待办事项应用程序,并尝试运行一个应该在回调函数返回输出之前运行的函数。回调 fn 监听点击事件并将用户输入的值输出到屏幕。但在它发生之前,我想首先在顶部输出 h1 元素和一些文本,然后返回回调函数。我怎样才能做到这一点?我尝试在回调上使用 setInterval,但没有帮助。如果用户输入内容并单击添加按钮,我希望文本“待办事项列表”出现在最顶部,然后是实际用户的输入本身。我的代码:
(function () {
var button = document.getElementsByTagName("button");
var userInput = document.getElementById("user_input");
function addItem() {
var li = document.createElement("li");
li.innerHTML = userInput.value;
document.getElementsByTagName("ul")[0].appendChild(li);
userInput.value = "";
}
function categorize() {
console.log(document.getElementById("todo").getElementsByTagName('li').length);
if (document.getElementById("todo").getElementsByTagName('li').length > 0 && document.getElementById("todo").getElementsByTagName('li').length < 2) {
var h1 = document.createElement("h1");
h1.innerHTML = "to-do";
document.getElementById("todo").appendChild(h1);
}
}
button[0].addEventListener("click", addItem, false);
button[0].addEventListener("click", categorize);
})();
最佳答案
嗯,有一些问题需要在这里得到答案:
- 为什么不在
addItem
中调用categorize()
函数并 仅使用addItem()
作为回调。 - 为什么要将整个代码包装在 Immediately-Invoked Function Expression 中?
- 如果待办事项列表中只有一个元素,为什么只显示
h1
元素?
我尝试重构您的代码,使其更有意义。这是一个工作演示:
var button = document.getElementsByTagName("button");
var userInput = document.getElementById("user_input");
var entered = false;
function addItem() {
if(!entered){
categorize();
}
var li = document.createElement("li");
li.innerHTML = userInput.value;
document.getElementsByTagName("ul")[0].appendChild(li);
userInput.value = "";
}
function categorize() {
entered= true;
var h1 = document.createElement("h1");
h1.id = "title";
h1.innerHTML = "to-do";
document.getElementById("todo").appendChild(h1);
}
button[0].addEventListener("click", addItem, false);
<input type="text" id="user_input" />
<button>Add Item</button>
<div id="todo">
<ul></ul>
</div>
关于javascript - 在回调函数之前调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43615598/