为什么“Enter”按钮的键盘事件功能不起作用；答案

【问题标题】：Why keyboard event function of "Enter" button is not working;为什么“Enter”按钮的键盘事件功能不起作用；
【发布时间】：2021-12-07 09:26:32
【问题描述】：

我有以下非常简单的 HTML 并且在 js 脚本的 if 语句中，我只是想在有人输入“Enter”按钮时插入一个额外的功能 - 但 Idk 为什么它不起作用！

document.querySelector(".subText").addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    let x = document.querySelector("#fname").value;
    console.log(x);
  }
});

<body>
  <div class="wrapper">
    <div class="container">
      <div class="toDo">
        <!-- <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M224 184h128m-128 72h128m-128 71h128"/>
            <path d="M448 258c0-106-86-192-192-192S64 152 64 258s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
            <circle cx="168" cy="184" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
            <circle cx="168" cy="257" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
            <circle cx="168" cy="328" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
          </svg> -->
        <p class="toDoText">To-do List</p>
      </div>
      <div>
        <input type="text" id="fname" name="fname" placeholder="I need to..." class="inputText">
        <input type="submit" value="Submit" class="subText" onclick="addNote()">
      </div>
    </div>
    <div class="test">
      <!-- <div class="notesList">
          <p class="notesInput">ddbd</p>
          <button class="deleteBut" onclick="deleFunc()">
          </button>
        </div> -->
    </div>
  </div>
</body>

【问题讨论】：

标签： javascript addeventlistener appendchild queryselector

【解决方案1】：

函数被调用，if 语句正确执行。在这里，我编辑了console.log 行。

运行 sn-p。单击文本框，使用 Tab 键选择按钮，然后按 Enter 键。瞧！ 3 个console.log 语句运行。

也许您需要完善您对正在发生的事情以及您的问题的理解。 :)

document.querySelector(".subText").addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    let x = document.querySelector("#fname").value;
//        console.log(x);
    console.log("console.log(x); (1)");
  }
});

function addNote() {
  let x = document.querySelector("#fname").value;
//        console.log(x);
    console.log("console.log(x); (2)");
  let divN = document.createElement("div");
  divN.classList.add("notesList");
  let para = document.createElement("p");
  para.classList.add("notesInput");
  divN.appendChild(para);
  let paraText = document.createTextNode(x);
//      console.log(paraText);
    console.log("console.log(paraText); (3)");
  para.appendChild(paraText);
  let but = document.createElement("button");
  but.classList.add("deleteBut");
  but.setAttribute("onclick", "deleFunc()")
  divN.appendChild(but);
  let y = document.querySelector(".test");
  y.appendChild(divN);
}

<body>
  <div class="wrapper">
    <div class="container">
      <div class="toDo">
        <!-- <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M224 184h128m-128 72h128m-128 71h128"/>
            <path d="M448 258c0-106-86-192-192-192S64 152 64 258s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
            <circle cx="168" cy="184" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
            <circle cx="168" cy="257" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
            <circle cx="168" cy="328" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
          </svg> -->
        <p class="toDoText">To-do List</p>
      </div>
      <div>
        <input type="text" id="fname" name="fname" placeholder="I need to..." class="inputText">
        <input type="submit" value="Submit" class="subText" onclick="addNote()">
      </div>
    </div>
    <div class="test">
      <!-- <div class="notesList">
          <p class="notesInput">ddbd</p>
          <button class="deleteBut" onclick="deleFunc()">
          </button>
        </div> -->
    </div>
  </div>
</body>

【讨论】：

感谢@enhzflep 抽出宝贵时间。第二个问题的问题最后与宽度的属性有关，但第一个问题的解决方案只有在我最初按下提交时才有效。如果我再次更改输入，我仍然无法使用“Enter”

【解决方案2】：

使用 if 语句，我只是想在有人输入“Enter”按钮时插入一个附加功能 - Idk 为什么它不起作用！

您在按钮上添加了侦听器，而不是在输入字段中添加侦听器。

和 addNote() 函数中的其余代码，我试图在每次用户插入新输入时创建一个元素 - 类似于在 HTML 代码中注释掉的那个。但是，似乎从 JS 生成的元素的样式与我在 HTML 中注释掉的 div 正好相反...

我重新排列了您的代码，使其更具可读性。我建议将每个元素的每个创建和属性更改重构为它们自己的方法，以使代码更具可读性。

在我重新排列期间，我通过将代码按正确的顺序自动解决了您的问题。现在生成的代码看起来像您的注释代码。

我还为您的按钮添加了一个事件侦听器。如果去掉按钮，也需要去掉事件监听，否则会出现内存泄漏。

我还想建议您开始使用id 和getElementByID 而不是querySelect 和class，只是为了创建一个模式，其中元素上的id 间接表示它与javascript 一起使用.

document.getElementById("fname").addEventListener("keyup", function(event) {
  if (event.key === "Enter") {
    addNote();
  }
});

function addNote() {
  let x = document.querySelector("#fname");
  let divN = document.createElement("div");
  let para = document.createElement("p");
  let paraText = document.createTextNode(x.value);
  let but = document.createElement("button");
  let y = document.querySelector(".test");

  x.value = '';

  divN.classList.add("notesList");
  para.classList.add("notesInput");
  but.classList.add("deleteBut");
  
  but.addEventListener('click', (event) =>
    { console.log('clicked removed') }
  );
  
  divN.appendChild(para);
  para.appendChild(paraText);
  divN.appendChild(but);
  y.appendChild(divN);
}

<body>
  <div class="wrapper">
    <div class="container">
      <div class="toDo">
        <!-- <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M224 184h128m-128 72h128m-128 71h128"/>
            <path d="M448 258c0-106-86-192-192-192S64 152 64 258s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
            <circle cx="168" cy="184" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
            <circle cx="168" cy="257" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
            <circle cx="168" cy="328" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
          </svg> -->
        <p class="toDoText">To-do List</p>
      </div>
      <div>
        <input type="text" id="fname" name="fname" placeholder="I need to..." class="inputText">
        <input type="submit" value="Submit" class="subText" onclick="addNote()">
      </div>
    </div>
    <div class="test">
      <!-- <div class="notesList">
          <p class="notesInput">ddbd</p>
          <button class="deleteBut" onclick="deleFunc()">
          </button>
        </div> -->
    </div>
  </div>
</body>

【讨论】：

确实！它现在更具可读性！ @RichardElimaa 非常感谢您的留言。第二个问题的问题最终与宽度属性有关，但第一个问题的解决方案只有在我最初按下提交时才有效。如果我再次更改输入，我仍然无法使用“Enter”
好的，但是我的回答解决了这个问题，对吧？我在代码中做了一个小的更正，在将项目添加到列表后（按 Enter 或按钮时）清除输入。
很遗憾没有，因为如果我在输入时写了一些东西然后按回车键，则不会创建任何元素
很奇怪，因为我的 sn-p 在 Mac Firefox 和 Mac Chrome 中都适用。
我没有按“输入”按钮提交。我只是在输入中写一些东西，然后按回车键。可能你说的不一样。