功能适用于“输入”，但不适用于“按钮单击”（虽然，我只将事件添加到按钮，而不是按键）答案

【问题标题】：Function works with 'enter', but not 'button click' (Although, I only added event to button, not to keypress)功能适用于“输入”，但不适用于“按钮单击”（虽然，我只将事件添加到按钮，而不是按键）
【发布时间】：2020-06-03 19:58:42
【问题描述】：

我正在构建一个“待办事项”应用程序项目来改进我的 JS，但是有一个有趣的问题。我向按钮添加了一个事件，当我按下按钮时，输入的值将作为 li 添加到 ul。一切都与输入键完美配合。虽然，我没有添加按键事件，我只添加了按钮点击。当我单击按钮时，它显示错误“无事可做？”，这是第二个“else if”。在此先感谢您的帮助。

var button = document.getElementById('btn');
var input = document.getElementById('input');
var list = document.getElementById('list');

button.addEventListener('click', (x) => {
  if (input.value != '' & checklis()) {
    const li = document.createElement('li');
    li.classList.add('todo');
    li.innerHTML = `<i class="fas fa-circle"></i> ${input.value} <i class="fas fa-minus"></i>`;
    list.appendChild(li);
    input.value = '';
    error.textContent = '';
  } else if (input.value == '') {
    error.textContent = 'Nothing to do?'
    input.value = '';
    errorVanish();
  } else if (!checklis()) {
    input.value = '';
    error.textContent = 'Too many things to do.'
    errorVanish();
  }
  x.preventDefault();
})


function checklis() {
  const lis = document.querySelectorAll('.todo');
  if (lis.length < 9) {
    return true
  }
}

<div class="container">
  <p class="error"></p>
  <header class="header">
    <h2>TASK BOX</h2>
    <p>Let's plan the day</p>
  </header>


  <div class="main_content">

    <form action="">

      <input onblur="this.value = ''" autocomplete="off" id="input" type="text" placeholder="I plan to..." onfocus="this.placeholder = ''" onblur="this.placeholder='I plan to...'">
      <button class="submit" id="btn"> ADD </button>
    </form>
    <ul class="list_wrapper" id="list">

    </ul>

  </div>
</div>

【问题讨论】：

什么是input？该变量似乎没有在任何地方定义。另外，请显示相关的 HTML。
@kmoser 我用 HTML 更新了代码。 :) 哦...问题是 onblur 功能...谢谢您！
我提交的修改正在等待批准。但是，没有关于“错误”是什么的线索。我将其他所有内容都绑定到其元素。

标签： javascript html

【解决方案1】：

嗯，问题在于 HTML 中的“onblur”功能。 :D

【讨论】：