检测功能内的按键不起作用

Question

抱歉，如果这很明显，我是 Javascript 新手。我正在尝试制作一个可以计算两点斜率的计算器。我不知道如何清除一个文本输入框中的文本，因此我有四个文本输入框，但一次只显示一个。按 Enter 键后，调用 y1 函数。再次按 Enter 后，y1 函数应该调用 x2 函数，但事实并非如此。我使用 console.log 发现 y1 函数没有检测到按键。我从 Stack Overflow 复制粘贴了检测按键代码，但我不太理解它，所以这可能是其中的一部分。

我尝试删除该函数并将 y1 代码直接移到 x1 部分的 if 语句内，但这也不起作用。 这是 HTML：

 <p id="prompt">Loading...</p> <input type="text" id="input"> <input type="text" id="input2"> <input type="text" id="input3"> <input type="text" id="input4">

这是 Javascript：

var x4 = document.getElementById('input4');
  x4.style.display = "none";
  var x3 = document.getElementById('input3');
  x3.style.display = "none";
  var x2 = document.getElementById('input2');
  x2.style.display = "none";
  var x = document.getElementById('input');
  x.style.display = "inline";

   document.getElementById("prompt").innerHTML = ("Please Enter x1");

   const x1 = document.getElementById('input');
   x1.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
    y1()
     }
   });
    
   function y1() {
   document.getElementById('prompt').innerHTML = ("Please Enter y1");
    x.style.display = "none";
    x2.style.display = "inline";
      const y1 = document.getElementById('input2');
   x1.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
    x2()
     }
   });
   }
      function x2() {
   document.getElementById('prompt').innerHTML = ("Please Enter x2");
    x2.style.display = "none";
    x3.style.display = "inline";
    const x2 = document.getElementById('input3');
    x2.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
    y2()
     }
   });
   }
      function y2() {
   document.getElementById('prompt').innerHTML = ("Please Enter y1");
    x3.style.display = "none";
    x4.style.display = "inline";
      const y2 = document.getElementById('input4');
   y2.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
    x3.style.display = "none"
    document.getElementById('prompt').innerHTML = ("Loading");
     }
   });
   
   }

我不断发现一些东西说我应该使用 jquery，但我对此了解不多，并且不想使用。

Answer 1

欢迎来到 Stack Overflow，

避免将变量和函数命名相同。 以后把你遇到的错误信息贴出来

const x1 = document.getElementById('input'); // already store under variable "x"
   x1.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
    y1()
     }
   });

const x1 = document.getElementById('input');

- 无需再次存储，只需使用

x.addEventListener('keydown'....

    function y1() {
        document.getElementById("prompt").innerHTML = "Please Enter y1";
        x.style.display = "none";
        x2.style.display = "inline";
        const y1 = document.getElementById("input2");
        x1.addEventListener("keydown", (e) => { // you didn't add event listener to y1, but to x1 that's it doesn't call it after you press enter
            if (e.key === "Enter") {
                x2();
            }
        });
    }

关于函数 y1

x1.addEventListener("keydown", (e) => { 

- 您没有向 y1 添加事件监听器，但是对于 x1，按下 Enter 后它不会调用它