英文:
How to make a JS function equal to a users input on an HTML form?
问题
以下是您要翻译的部分：
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");
// 此函数的值需要是用户在表单中输入的内容，但我不确定如何实现
form.addEventListener('submit', (e) => {
e.preventDefault();
const location = search;
if (location) {
getWeatherByLocation(location);
}
});
请注意，您的代码中包含HTML和JavaScript，但HTML部分已经被删除，只保留了JavaScript部分。如果您有任何需要进一步解释或翻译的问题，请随时提出。
英文:
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);
}
});
答案1
得分: 1
使用document.getElementById或document.querySelector来获取输入元素，然后在表单提交时读取其value属性以获取用户输入的内容。
const location = document.getElementById('formUserTextInput').value;
// ...
getWeatherByLocation(location);
英文:
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);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论