I am having trouble populating elements from the following Yahoo RSS feed: http://weather.yahooapis.com/forecastrss?w=12773400
I need to show the current weather conditions when a button is clicked.
Here is what I have so far.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Current Weather Conditions</title>
</head>
<script language="javascript" type="text/javascript">
//Load the data in the select object
function loadData()
{
var myWeatherRequest = false; // variable to hold XMLHttpRequest Object
var url = 'http://weather.yahooapis.com/forecastrss?w=12773400#'; // URL of RSS feed
var myTitle = document.getElementById("hTitle"); // elements to pull
var myTemp = document.getElementById("pTemperature"); // from
var myCond = document.getElementById("pCondition"); // RSS feed
loadXmlData(url, myTitle, myTemp, myCond);
}
function loadXmlData(url, object)
{
// attempt to create and make the request
myRequest = new XMLHttpRequest();
myRequest.open("GET", url, true);
myRequest.onreadystatechange = function() { processRequestChange(object) };
myRequest.send(null);
}
function processRequestChange(object)
{
if (myRequest.readyState == 4)
{
if (myRequest.status == 200)
{
copyWeatherData();
}
else
{
alert("Error loading page. " + myRequest.status + myRequest.statusText);
}
}
}
//Populate the page with data from RSS feed
function copyWeatherData()
{
var element1 = document.getElementById("hTitle");
var element2 = document.getElementById("pTemperature");
var element3 = document.getElementById("pCondition");
var items = myRequest.responseXML.getElementsByTagName("item");
var titlename = items.getElementsByTagName("title")[0].firstChild.nodeValue;
var tempname = items.getElementsByTagName("yweather:condition")[0].firstChild.nodeValue;
}
function getWeatherData()
{
var myweather = document.getweather.title.selectedIndex;
var load = myweather;
}
</script>
<body onload="loadData();">
<form method="post" action="#" name="getweather">
<h1 id="hTitle"></h1>
<p id="pTemperature"></p>
<p id="pCondition"></p>
<p>
<input id="btnGetCurrentMontgomeryWeather" type="button" value="Get current weather conditions" onclick="getWeatherData()" /></p>
</form>
</body>
</html>I need to populate the <h1> and two <p> elements. I know that the copyWeatherData() and getWeatherData() functions are not coded properly. Any guidance in the right direction would be appreciated.