如何在魔法8球项目中用回车键触发按钮点击事件？

你的代码逻辑本身是正确的，但HTML输入框的ID格式错误，导致回车键触发功能失效：

问题根源 #

HTML元素的id属性不能包含空格，你给输入框设置了id="inlineFormInputName2 userQuestion"，浏览器会把它解析为id="inlineFormInputName2"，同时把userQuestion当作一个普通属性而非ID。这就导致JS里的document.querySelector('#userQuestion')找不到目标输入框，回车键的事件监听器根本没绑定成功。

修复步骤 #

1. 修正输入框的ID：将id属性改为userQuestion，如果需要inlineFormInputName2这个标识，把它移到class属性中。
2. 可选优化事件类型：用keydown代替keypress，keypress在部分现代浏览器中已被弃用，keydown兼容性更好。

修正后的关键代码 #

HTML输入框部分

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

可选的JS事件监听修改

// 把keypress替换为keydown
question.addEventListener("keydown", enterButton);

修正后，回车键就能正常触发按钮点击，调用generateAnswer函数生成随机答案了。

内容的提问来源于stack exchange，提问作者Daithí