如何用回车按钮触发点击事件？

Question

我正在使用 vanilla javascript 构建一个非常基本的魔术 8 球类型“游戏”。 我有一个文本字段（用于用户问题）和下面的提交按钮。 目前，我使用提交按钮的事件侦听器可以正常工作，但如果用户单击输入，我也试图获得相同的结果。

我在 w3s 上看到你可以在点击进入时触发一个按钮，如下所示......

// Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user presses a key on the keyboard
input.addEventListener("keypress", function(event) {
  // If the user presses the "Enter" key on the keyboard
  if (event.key === "Enter") {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("myBtn").click();
  }
});

...但我似乎无法将其转化为我自己的项目。 下面我的项目的 HTML 和 JS； 我现在尽量不使用嵌套函数只是为了帮助我理解（正如我的课程导师所建议的）。

JavaScript

let question = document.querySelector('#userQuestion');
let button = document.querySelector('#shakeButton');
let answer = document.querySelector('#answer');

let options = [
  'It is certain.',
  'Signs point to yes.',
  'Concentrate and ask again.',
  'My sources say no.',
]

// Generate a random number
function generateAnswer() {
  let index = Math.floor(Math.random() * 4);
  let message = options[index];
  answer.textContent = message;
  answer.style.fontSize = '18px';
  setTimeout(timeOut, 3000);
};

// Timeout function
function timeOut() {
  answer.textContent = '8';
  answer.style.fontSize = '120px';
};

// Enter button trigers click event
function enterButton (event) {
  if (event.key === "Enter") {
    event.preventDefault();
    button.click();
  }
};

//Event listener for button click
button.addEventListener('click', generateAnswer);
question.addEventListener("keypress", enterButton);

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Magic 8 Ball, ask it anything and it will answer.">

  <!-- Stylesheet & Font Awesome Links -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@800&family=Press+Start+2P&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
  <link rel="stylesheet" href="assets/css/style.css" type="text/css">
  <!-- Stylesheet & Font Awesome Links End -->
  
  <title>Magic 8 Ball</title>
</head>

<body>

  <nav class="navbar">
    <div class="container-fluid">
      <a class="navbar-brand ms-auto" href="#">dc games</a>
    </div>
  </nav>

  <!-- Header -->
  <header class="heading">
    <h1>The Magic 8 Ball</h1>
    <p>Shake the Magic 8 Ball and it will answer your question.</p>
  </header>
  <!-- Header End-->


  <!-- Magic 8 Ball -->
  <div class="ball-black">
    <div class="ball-white">
      <p id="answer">8</p>
    </div>
  </div>
  <!-- Magic 8 Ball End -->

  <!-- User Question -->
  <div class="user-input">
    <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2 userQuestion" placeholder="What is your question?" required>
    <button type="button" class="btn" id="shakeButton">Shake!</button>
  </div>
  <!-- User Question -->


  <!-- Footer -->
  <footer>
    <div class="copyright fixed-bottom">
      <p>Copyright © dc games 2022</p>
    </div>
  </footer>
  <!-- Footer End -->

  <!-- JavaScript Links -->
  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="assets/js/script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  <!-- JavaScript Links End -->

</body>

</html>

Answer 1

单个 DOMElement 上不能有多个 ID。 如果您从用户问题的 ID 中删除inlineFormInputName2 ，您的代码将起作用。 一个类只能有多个标识符。 类用于使用 css 和 Id 进行格式化以专门标识元素。

如何用回车按钮触发点击事件？

问题描述

1 个解决方案

解决方案1
0 2022-12-21 14:30:07

如何用回车按钮触发点击事件？

问题描述

1 个解决方案

解决方案1 0 2022-12-21 14:30:07

解决方案1
0 2022-12-21 14:30:07