How to simulate the Enter button to replicate the submit button?

Question

I am making a weather application with a textarea, if you click "submit" you will see the weather results. Now, I want to make it so you can click enter to see the data. this is some code:

    <section class="inputs">
        <input type="text" placeholder="Enter any city..." id="cityinput">
        <input type="submit" value="Submit" id="add">
        <button placeholder="submit" id="add"></button>
    </section>

This is some javascript code:

   btn.addEventListener('click', function(){

//This is the api link from where all the information will be collected

        fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputval.value+'&appid='+apik)
            .then(res => res.json())

            //.then(data => console.log(data))

            .then(data => {

//Now you need to collect the necessary information with the API link. Now I will collect that information and store it in different constants.

                var nameval = data['name']
                var tempature = data['hourly']['pop']
//Now with the help of innerHTML you have to make arrangements to display all the information in the webpage.
                city.innerHTML=`Weather of <span>${nameval}<span>`
                temp.innerHTML = ` <span>${ tempature} </span>`


            })

Answer 1

You need to attach a listener to your textarea, if the user press enter then you execute your call (here simulated by an alert) and you prevent the default in order to don't go in a new line. In any other case, just don't take any action

 const textArea = document.querySelector('textarea'); textArea.addEventListener('keydown', e => { if (e.key === 'Enter') { window.alert('Sending data...'); e.preventDefault(); } });

 <textarea placeholder="Type and press enter"></textarea>

You can just put the submit code in a function, and call the function in both the cases:

function submitAction() {
  fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputval.value+'&appid='+apik)
  .then(res => res.json())
  .then(data => {
      const nameval = data['name']
      const tempature = data['hourly']['pop']
      city.innerHTML=`Weather of <span>${nameval}<span>`
      temp.innerHTML = ` <span>${ tempature} </span>`
   });
}

Then:

  if (e.key === 'Enter') {
    submitAction();
    e.preventDefault();
  }

And:

 btn.addEventListener('click', () => submitAction());

Answer 2

You could use a HTML form and use the form submit event :

<form id="form">
    <input type="text" placeholder="Enter any city..." id="cityinput" />
    <button type="submit">Submit</button>
</form>

Inside the event listener you can then read the value from the input once the submit event is triggered. Alternatively you could go looking for the input value inside the event object.

var form = document.getElementById('form');
form.addEventListener('submit', function(event) {
  const inputValue = document.querySelector('input').value;
        event.preventDefault();
        fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputValue+'&appid='+apik)
            .then(res => res.json())
            .then(data => {
                var nameval = data['name']
                var tempature = data['hourly']['pop']
                city.innerHTML=`Weather of <span>${nameval}<span>`
                temp.innerHTML = ` <span>${ tempature} </span>`
            })
});

Answer 3

You need to create listener for keydown event and check if clicked key is enter:

const textarea = document.querySelector(".some-class");

textarea.addEventListener("keydown", function(e) {
    if(e.key === "Enter") {
        // your code
    }
});

<textarea class="some-class"></textarea>