Question

我是Java的新手，我遵循了一个教程，该教程非常容易用javascript显示我网站上的开放天气数据。 https://codepen.io/mattfroese/pen/WaeYQV https://bytemaster.io/fetch-weather-openweathermap-api-javascript

这很奇怪，但是它可以在Codepen上使用，而不是在我的网站上...

也许您可以帮助我吗？这是代码...

const key = '';
if(key=='') document.getElementById('temp').innerHTML = ('Remember to add your api key!');

function weatherBallon( cityID ) {
	fetch('http://api.openweathermap.org/data/2.5/weather?lat=47.204530&lon=-1.563377&appid=OPENWEATHER_APP_ID')  
	.then(function(resp) { return resp.json() }) // Convert data to json
	.then(function(data) {
		drawWeather(data);
	})
	.catch(function() {
		// catch any errors
	});
}
function drawWeather( d ) {
  var celcius = Math.round(parseFloat(d.main.temp)-273.15);
	var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32);
  var description = d.weather[0].description; 
	
	document.getElementById('description').innerHTML = description;
	document.getElementById('temp').innerHTML = celcius + '°';
	document.getElementById('location').innerHTML = d.name;
  
  if( description.indexOf('rain') > 0 ) {
  	document.body.className = 'rainy';
  } else if( description.indexOf('cloud') > 0 ) {
  	document.body.className = 'cloudy';
  } else if( description.indexOf('sunny') > 0 ) {
  	document.body.className = 'sunny';
  } else {
  	document.body.className = 'clear';
  }
}
window.onload = function() {
	weatherBallon( 6167865 );
}

footer {
  position:fixed;
  bottom:0px;
  left:0;
  height: 77px;
  width: 100%;
  margin: auto;
  font: 30px "Elastik-B";
  
}

.footer ul {
    margin: 0;
    padding: 0;
    position:absolute;
    list-style-type: none;
    bottom:15px;
    right:5%;
}

.footer li {
   text-align:right;
   float: right;
   display: block;
   padding: 15px;
}

<footer>
<div class="footer">
<ul>
    <li><div id="temp">...</div></li>
  </ul>
</div>
</footer>

Answer 1

您尚未在第一行中添加api密钥

const key = " ";

请添加api密钥，并检查是否仍然收到错误消息，请尝试

<script lang="text/javascript">
const key = 'b2b1b01a9261a8b31e450dffc404f9e9';
if(key=='') document.getElementById('temp').innerHTML = ('Remember to add your api key!');

function weatherBallon( cityID ) {
    fetch('http://api.openweathermap.org/data/2.5/weather?lat=47.204530&lon=-1.563377&appid=b2b1b01a9261a8b31e450dffc404f9e9')  
    .then(function(resp) { return resp.json() }) // Convert data to json
    .then(function(data) {
        drawWeather(data);
    })
    .catch(function() {
        // catch any errors
    });
}
function drawWeather( d ) {
  var celcius = Math.round(parseFloat(d.main.temp)-273.15);
    var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32);
  var description = d.weather[0].description; 

    document.getElementById('description').innerHTML = description;
    document.getElementById('temp').innerHTML = celcius + '°';
    document.getElementById('location').innerHTML = d.name;

  if( description.indexOf('rain') > 0 ) {
    document.body.className = 'rainy';
  } else if( description.indexOf('cloud') > 0 ) {
    document.body.className = 'cloudy';
  } else if( description.indexOf('sunny') > 0 ) {
    document.body.className = 'sunny';
  } else {
    document.body.className = 'clear';
  }
}
window.onload = function() {
    weatherBallon( 6167865 );
}
  </script>

我无法在我的网站上显示温度

1 个答案: