CODEWITHSUNDEEP
javascriptweather-apiopenweathermap
AKMinecraftFR
AKMinecraftFR

Reputation: 1

Including OpenWeatherMap API using Javascript

I'm a very beginner in JavaScript, I recently learned it at school indeed. I have to include and get responses from the OpenWeatherMap API on a web page. For now, all I want to do is getting the temperature in the city specified in the API's URL. I struggled a long time before asking for your assistance but I couldn't figure my problem out.

Here is my code : 

var btn = document.getElementById("btn");
var p = document.getElementById("paragraphe");
var txtf = document.getElementById("txtf");
btn.addEventListener('click', fun, false);

function fun(){

var xhr = new XMLHttpRequest();
xhr.open('GET','http://api.openweathermap.org/data/2.5/weatherq=London&appid=2de143494c0b295cca9337e1e96b00e0&units=metric', true)
xhr.addEventListener('readystatechanged', function(){
if(xhr.readyState == 4 && xhr.status == 200){
    var obj = JSON.parse(xhr.responseText)
    p.innerHTML = obj.main.temp;

}

}, false)

xhr.send();

}

Thank you for your help !

Upvotes: 0

Views: 716

Answers (1)

theMillerCode
theMillerCode

Reputation: 11

At first glance, check your spelling. I can't see your HTML, but possible issues could be: #paragraphe and #txtf.

Also, change the event name readystatechanged to readystatechange.

One tip, add console.log("insert check data here"); throughout your code. That way to can see in the console log where it is breaking. This really helps with trouble shooting!

Upvotes: 1

Related Questions