Wie kann ich eine JS -Funktion gleich einer Eingabe von Benutzern in ein HTML -Formular machen? ⇐ HTML

[Anonymous]

Ich bin neu bei JavaScript und HTML, ich erstelle eine grundlegende Wetter -App mit der Open Weather App -App -API - ich kann die Informationen nennen, die ich von der API möchte, indem ich meinen GetWeatherByLocation -Funktionen als Wert von jeder Stadt, die ich in JS eingeben kann, erklärt, aber ich möchte, dass der Benutzer in der Lage ist. Mein HTML, ich habe versucht, meinem Formular einen Ereignishörer hinzuzufügen, um die Eingaben der Benutzer aufzunehmen und dies gleich dem Wert meiner GetWeatherByLocation zu machen, aber ich bin mir nicht sicher, wie ich mich < /p>
hier nähert. Hier ist mein Code.

Code: Select all

My First Weather App



My First Weather App

Location



Search

Current Weather in 
City: 

Temperature: 
Weather: 
Humidity: 
Wind Speed: 







©2023 - Created by - Ollie Lloyd

< /code>

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);
}
});