在回调函数之前调用函数

Question

我正在制作应用程序并尝试运行一个应该在回调函数返回输出之前运行的函数。回调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);

})();

Answer 1

试试这个：

button[0].addEventListener("click", addItem, false);
button[0].addEventListener("click", categorize);

而不是：

Report_wb

Answer 2

我的建议是处理在点击事件

之前触发的事件mousedown

button[0].addEventListener.on('mousedown', categorize);

Answer 3

有一些问题需要在这里得到答案：

• 为什么不在categorize()和addItem中拨打addItem()功能 仅使用h1作为回调。
• 为什么要将整个代码包装在 Immediately-Invoked Function Expression ？
中
• 如果Todo列表中只有一个元素，为什么只显示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);元素？

我尝试重构您的代码，因此更有意义。这是一个有效的演示：

＆＃13;

＆＃13;

<input type="text" id="user_input" />
<button>Add Item</button>
<div id="todo">
  <ul></ul>
</div>

＆＃13;

xxxx{}xxx{}.format('{}', '{}')

＆＃13;

＆＃13;

＆＃13;

Answer 4

我在下面的代码中做了一些小的更新。请尝试使用它。

(function () { 
    var button = document.getElementsByTagName("button");
     var userInput = document.getElementById("user_input");

    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); 
     } 
    } 

    function addItem() {
      categorize(); //since you want this to be     executed before the code in addItem()
      var li = document.createElement("li");
      li.innerHTML = userInput.value;
     document.getElementsByTagName("ul")[0].appendChild(li); 
     userInput.value = "";
     } 

    button[0].addEventListener("click", addItem);
    })()