我在.js文件中的$(document).ready()函数上收到错误。我已经添加了库并正在使用http服务器。我不确定在哪里搜索,因为我已经尝试了过去几天我在网上找到的所有解决方案。我最近从CodePen转到了VS Code。
这是HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" href="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Local Weather</title>
</head>
<body>
<div class="box">
<div id="temp">
<button onclick="cTemp()">C</button>
<button onclick="fTemp()">F</button>
</div>
<div id="location"></div>
<div id="weather"></div>
</div>
</body>
</html>
这是JS:
var farTemp, celTemp;
var lat, long;
$(document).ready(function() {
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
// set variables to obtained location from above
lat = position.coords.latitude;
long = position.coords.longitude;
// set JSON data to location variables, "lat" and "long" after converting to string for URL
$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + String(lat) + "&lon=" + String(long), function(json) {
// temp variables and conversion rounded to nearest whole number
farTemp = Math.floor(json.main.temp * 1.8 + 32);
celTemp = JSON.stringify(Math.floor(json.main.temp));
// output data
document.getElementById("location").innerHTML = json.name;
document.getElementById("temp").innerHTML = farTemp;
document.getElementById("weather").innerHTML = json.weather[0].description;
});
});
}
}
});
// output temperautre in F
function fTemp() {
document.getElementById("temp").innerHTML = farTemp + "°F";
} // close fTemp
// output temperature in C
function cTemp() {
document.getElementById("temp").innerHTML = celTemp + "°C";
} // close cTemp
// get location
fTemp();
cTemp();
这是CSS:
.box {
text-align: center;
font-size: 24px;
color: #5c85d6;
margin-top: 20%;
}
button {
background-color: #79d2a6;
color: #fff;
border-radius: 4px;
border: none;
margin-right: 4px;
}