[SOLVED] How to make a JS function equal to a users input on an HTML form?

How to make a JS function equal to a users input on an HTML form?

Im new to Javascript and HTML, I'm building a basic weather app with the open weather app api - I am able to call the info that I want from the api by declaring my getWeatherByLocation functions value as whatever city I input within JS, but I want the user to be able to enter a city and have that cities info show up

I called the API and got it to console log, I then got it to show in my HTML, I tried adding an event listener to my form in an attempt to take the users input and make that equal to the value of my getWeatherByLocation but unsure how to approach

Here is my code, Im not sure what to try next, do i need to add an event listner for the search in my HTML?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>My First Weather App</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    </head>
    <body>
        <h1>My First Weather App</h1>
        <form class="userFormInput" id="form">
            <label for="location" id="formUserLocation">Location</label><br>
            <input type="text" placeholder="Search By Location" id="formUserTextInput" name="Location"><br>
            <button type="submit" id="search">Search</button>
        </form>
        <h2>Current Weather in </h2>
        <p >City: <span id="currentResultCity"></span></p>
        <div class="displayCurrentWeatherSection">
            
            <p >Temperature: <span id="currentTemperatureResult"></span></p>
            <p >Weather: <span id="currentWeatherResult"></span></p>
            <p >Humidity: <span id="currentHumidityResult"></span></p>
            <p >Wind Speed: <span id="currentWindResult"></span></p>
        </div>
    <main>

    </main>
    <script src="./assets/js/script.js"></script> 
    </body>

    <footer>©2023 - Created by - Ollie Lloyd</footer>
</html>


const apiKey = "74190a20c1ddbdc4f115b7fc58fd24ac";
const APIURL = `https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid=${apiKey}`;
const APIURLForecast = `https://api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}&appid=${apiKey}`;
const form = document.getElementById('form');
const main = document.getElementById('main');
const search = document.getElementById('search');


const urlApiCall = (location) =>
    `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}&units=imperial`;

function getWeatherByLocation(location){
    fetch (urlApiCall(location)).then(function (response){
        return response.json();
    }).then(function(data){
        document.getElementById("currentResultCity").innerHTML=(data.name);    
        document.getElementById("currentTemperatureResult").innerHTML=(data.main.temp)+" °F";
        document.getElementById("currentHumidityResult").innerHTML=(data.main.humidity);
        document.getElementById("currentWeatherResult").innerHTML=(data.weather[0].description);
        document.getElementById("currentWindResult").innerHTML=(data.wind.speed)+" mph";
    });
    
}


getWeatherByLocation("boston");
**// the value of this function needs to be what the user inputs in the form but Im unsure how to accomplish this**


form.addEventListener('submit', (e) => {
    e.preventDefault();

    const location = search;

    if (location) {
        getWeatherByLocation(location);
    }
});

Solution

Use document.getElementById or document.querySelector to get the input element, then read its value property to get what the user entered when the form is submitted.

const location = document.getElementById('formUserTextInput').value;
// ...
getWeatherByLocation(location);