Changing API parameter with user input-CodePudding

Hoping someone can help!

I've been trying to change Api parameters with a user input through a text box (will add catch for errors in input and things later but I just can't get it to work I have been trying to convert input text into a variable I can insert into the api Url for hours lol)

atm im getting an error that saying the btn event listener is not a function

HTML

 <form >
            <input id="input"  placeholder="Enter City" type="text">
            <input type="button" value="Submit" id="btn">

JavaScript and JQuery

let inputEl = $('#input');
let btn = $('#btn');
let formEl = $('#user-form')

const formSubmitHandler = function() {
    var city = inputEl.toString(); 
    if (city) {
      fetchCity(city);
  
      formEl.textContent = '';
      inputEl.value = '';
    } else {
      alert('Please enter a city');
    }
  };
const fetchCity= function(city){
    var apiUrl = 'http://api.openweathermap.org/geo/1.0/direct?q='   city   ',GB&limit=5&appid=554388edb86f83b04c10657b0a21f79c';
      
        fetch(apiUrl)
          .then(function (response) {
            if (response.ok) {
              console.log(response);
              response.json().then(function (data) {
                console.log(data);
              });
            } else {
              alert('Error: '   response.statusText);
            }
          })
          .catch(function (error) {
            alert('Unable to connect');
          });
};
              
btn.addEventListener('click', formSubmitHandler);

I've tried doing it multiple different ways, I must be missing something.

I need to be able to return that string as a JSON so I can get the LAT,LON to return the cities data.

CodePudding user response：

Replace your line let formEl = $('#user-form') with let formEl = $('.user-form')

const $ = document.querySelector.bind(document);
        let inputEl = $('#input');
        let btn = $('#btn');
        let formEl = $('.user-form')

        const formSubmitHandler = function () {
            var city = inputEl.value;
            if (city) {
                fetchCity(city);

                formEl.textContent = '';
                inputEl.value = '';
            } else {
                alert('Please enter a city');
            }
        };
        const fetchCity = function (city) {
            var apiUrl = 'http://api.openweathermap.org/geo/1.0/direct?q='   city   ',GB&limit=5&appid=554388edb86f83b04c10657b0a21f79c';

            fetch(apiUrl)
                .then(function (response) {
                    if (response.ok) {
                        console.log(response);
                        response.json().then(function (data) {
                            console.log(data);
                        });
                    } else {
                        alert('Error: '   response.statusText);
                    }
                })
                .catch(function (error) {
                    alert('Unable to connect');
                });
        };

        btn.addEventListener('click', formSubmitHandler);

<form >
        <input id="input" placeholder="Enter City" type="text">
        <input type="button" value="Submit" id="btn">
    </form>