使用 Click 和 Enter 键触发按钮以获取 Javascript

Question

我一直在网站上寻找不同的解决方案，但似乎没有一个适合我。 我需要使用 Enter 按键事件和鼠标单击触发提交按钮，以便从天气 api 中获取数据。

<div class="inputdiv">
    <input type="text" placeholder="Enter City, Country" id="cityinput">
    <input type="submit" value="Submit" id="add" onclick="">
</div>
<script src="./script.js"></script>

这是js：

let inputval = document.querySelector('#cityinput')
let btn = document.getElementById('add')

inputval.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
  event.preventDefault();
  document.getElementById("add").click();
      
     fetch('......')

当我按 Enter 时，它可以工作，但是即使单击按钮，我也找不到获取方法。

Answer 1

该按钮是type="submit"的输入，默认情况下会触发页面重新加载，将其设为<button>或将其保留为<input type="submit" />但在这种情况下，您将不得不执行event.preventDefault()后跟所需的逻辑。

Answer 2

您可以将输入放在表单中。 然后输入会找到第一个submit按钮并触发点击

 let form = document.getElementById('form'); form.addEventListener('submit', (event) => { event.preventDefault(); console.log("Pressed") });

 <div class="inputdiv"> <form id="form"> <input type="text" placeholder="Enter City, Country" id="cityinput"> <input type="submit" value="Submit" id="add"> </form> </div>