Trigger a button with both Click and Enter key for fetching Javascript

Question

I've been looking for different solutions on the site, but none seem to work for me. I need to trigger a submit button with Enter keypress event and mouse click, in order to fetch data from a weather 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>

Here's the 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('......')

When I press Enter it works, but I can't find a way to fetch even clicking the button.

Answer 1

The button is an input of type="submit" which by default triggers a page reload, either make it a <button> or keep it an <input type="submit" /> but then in this case you'll have do a event.preventDefault() followed by the desired logic.

Answer 2

You can put the inputs inside a form . Then enter will find first submit button and will trigger click

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>