gpt4 book ai didi

javascript - 我是否为这个天气应用程序正确设置了 API?

转载 作者:行者123 更新时间:2023-12-01 00:11:24 25 4
gpt4 key购买 nike

我正在使用天气应用程序 API,并尝试根据用户在表单中插入的内容显示天气数据。由于某种原因,数据未显示。我已经把代码检查了10遍了,但我似乎找不到错误。

有人可以看看我哪里出了问题吗?

谢谢

$(document).ready(function() {
$('submitWeather').click(function() {
var city = $('#city').val();

if (city != '') {

$.ajax({

url: 'https://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=_MY_API_KEY_",
type: "GET",
dataType: "jsonp",
success: function(data) {
var widget = show(data);

$("#show").html(widget);

$("#city").val('');
}

});
} else {
$("#error").html('Field cannot be empty');
}
});
});

function show(data) {
return '<h3><strong>Weather<strong>: ' + data.weather[0].main + ' </h3>' +
'<h3><strong>Weather<strong>: ' + data.weather[0].description + ' </h3>';
}

console.log('hello')
.mainArea {
background-color: lightgray;
}

.day1,
.day2,
.day3,
.day4,
.day5 {
width: 220px;
height: 200px;
background-color: blue;
position: relative;
color: white;
}

.input {
text-align: center;
}

input[type='text'] {
height: 50px;
width: 200px;
background: #e7e7e7;
}

input[type='submit'] {
height: 50px;
width: 100px;
background: blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Weather Dashboard</title>
</head>

<body>

<!-- Navigation Bar -->

<nav class="navbar navbar-light bg-light jumbotron">
<div class="navbar-brand">Weather Guide</a>
<!-- <form class="form-inline">
<input class="inputValue form-control mr-sm-2" type="text" placeholder="Search City" aria-label="Search">
<button class="button btn btn-outline-success my-2 my-sm-0" value="submit" type="submit">Search</button>
</form>-->
</nav>

<div class="container">
<div class="row">
<h3 class="text-center text-primary">Enter City Name</h3>
</div>
<div class='row form-group form-inline'>
<input tyepe='text' name='city' id="city" class="form-control" placeholder="city name">
<button id="submitWeather" class="btn btn-primary">Search</button>
</div>

<div id="show">

</div>
</div>

<!-- Main Content -->




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>

</html>

最佳答案

$('submitWeather') 应该是 $('#submitWeather')

关于javascript - 我是否为这个天气应用程序正确设置了 API?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60048778/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com