0

I need to show the high and low temperature for the current day using mathrandom and then include the temperature for the rest of the week. However when I put in my function for the temperature for the remaining week, I just get a list of Thursdays... I'm not sure what I'm doing wrong. 

// display the forecast
var elem = document.getElementById("moncForecast");
`enter code here`displayForecast(elem);

/*
Create a new Date object for each of the 5 forecasts, then extract the day of the
week and display it.  You can change the number of forecasts to whatever suits your needs.
*/
function displayForecast(divElem, currentDate)
{



   for (var i = 1; i <= 1; i++)
   {
     var currentDate= new Date ();
     var elem = document.getElementById ("displayDate")
      var forecast = getDateForForecast(currentDate, i);
      dayOfWeek = forecast.getDay();
      divElem.innerHTML = currentDate + " Low: " + getLowTemp() + " High: " + getHighTemp() + "<br>";

      for (var i=1; i <=5; i++) {
      divElem.innerHTML += weekdays[dayOfWeek] + " Low: " + getLowTemp () + "High" + getHighTemp () + "<br>";


   }
}

}

/*
Return a low temperature using the Math.random method.
*/

function getLowTemp()
{
   return  Math.floor(Math.random() * 5) + 10;


}

/*
Return a high temperature using the Math.random method.
*/
function getHighTemp()
{
   return  Math.floor(Math.random() * 10) + 15 ;

}

here is the original code, hopefully you'll be able to show me where I have gone wrong because I cannot figure it out. 

 // display Winnipeg date and time
var wpgTime = getDateByOffset(-5);
var elem = document.getElementById("wpgTime");
elem.innerHTML = wpgTime;

// display the forecast
var elem = document.getElementById("wpgForecast");
displayForecast(elem, wpgTime);

// display Toronto date and time
var torTime = getDateByOffset(-4);
elem = document.getElementById("torTime");
elem.innerHTML = torTime;

// display the forecast
elem = document.getElementById("torForecast");
displayForecast(elem, torTime);

/*
Create a new Date object for each of the 5 forecasts, then extract the day of the
week and display it.  You can change the number of forecasts to whatever suits your needs.
*/
function displayForecast(divElem, currentDate)
{
   for (var i = 1; i <= 3; i++)
   {
      var forecast = getDateForForecast(currentDate, i);
      dayOfWeek = forecast.getDay();
      divElem.innerHTML += weekdays[dayOfWeek] + ":" + getLowTemp() + getHighTemp() + "<br>";
   }
}

/*
Return a low temperature using the Math.random method.
*/

function getLowTemp()
{
   return "<span style='margin-left:15px'>Low 0&deg;C </span>";
}

/*
Return a high temperature using the Math.random method.
*/
function getHighTemp()
{
   return "<span style='margin-left:25px'>High 0&deg;C </span>";
}

The html code is below. 

 <html lang = "en">
<head>
  <title>What's the weather?</title>
  <meta charset = "UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
  <link href="css/styles.css" rel="stylesheet">

</head>

<body>

  <div class="main-image">
    <div class="header">
    <h1> What's the Weather? | </h1>
  </div>
    <div id="showDate"> </div>
      <div id ="nav">
          <a href="index.html">Home</a>
  <a href="news.html">News</a>
  <div class="dropdown">
    <button class="dropbtn">Weather
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="winnipeg.html">Winnipeg</a>
      <a href="victoria.html">Victoria</a>
      <a href="moncton.html">Moncton</a>
    </div>
  </div>
</div>


<body style="font-family:Arial">

  <div class="weather">
     <h3>Winnipeg Weather</h3>

      <!-- Vancouver -->
      <p>Time</p>
      <div id="moncTime"></div>

      <p style="font-weight:bold">Winnipeg forecast:</p>
      <div id="moncForecast"></div>



  </div>

   <script src="example11-09a.js"></script>
   <script src="moncton.js"></script>

</body>
</html>
Amanda
  • 3
  • 4

2 Answers2

0

You call weekdays[dayOfWeek] which you defined outside your loop, so it will always be the same day. That is the issue.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Ana Turrillo
  • 66
  • 4
0

Some things in your code raised some flags to me.

First, I believe that you have created a global var elem and a local one. Maybe the one the global is being overwrite by the second one.

Second, I didn't actually get the first For loop "for (var i = 1; i <= 1; i++)". You only have one single interaction in spite of the the arguments that you entered. I believe that might be your problem, because you don't go through every weekday.

Finally, you receive the currentDate through the function, but you overwrite it with today's date, which can lead you to the same results every time. Also, if you have any problem with JavaScript date format you can check here: How to format a JavaScript date

Eric Romagna
  • 1
  • 2