For loop ending unexpectedly

Question

I'm having an issue with an assignment. My for loop doesn't seem to run and I'm not sure what I've done wrong. The variable dailyText prints "Weather Forecast" in a table but doesn't seem to enter the for loop. I'm not sure if this is a scoping issue or what's happening.

The script is supposed to take a number from a form option and create a table with that many rows.

Any help would be greatly appreciated!

function dailyInfo() {

  var dailyText = "";
  var numberDays = document.getElementById("numberDays").value; //https://stackoverflow.com/questions/23982774/turn-html-form-input-into-javascript-variable

  dailyText += "<table class='table'><tr><th>Weather Forecast</th></tr>";

  for (var i = 0; i < numberDays; i++) {
    dailyText += "<tr><td>Day: " + (i + 1) + "</td>";
    dailyText += "<td>" + dailyJsonObject.list[i].temp.min + "&#8451</td>";
    dailyText += "<td>" + dailyJsonObject.list[i].temp.max + "&#8451</td>";
    dailyText += "<td>" + dailyJsonObject.list[i].weather[0].description + "<img src ='http://openweathermap.org/img/w/'" + dailyJsonObject.list[i].weather[0].icon + ".png' /></td>";

  }
  document.getElementById("demo").innerHTML = dailyText;
  dailyText += "</tr></table>";
}

<form id="numberDay">
  <label id='numberDays'>Number of days requested</label>
  <select name='numberDays'>
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
        <option value='5'>5</option>
    </select>
  <button type="button" onclick="dailyInfo()">Submit</button>
</form>
</div>
<div id='demo'>
  <table id="tableDaily"></table>
</div>

Answer 1

You have named the label with the id required for the numberDays. This means the loop was using the label value not the actual input as expected.

See below for alteration:

<form id="numberDay">
    <label id='numberDays_label'>Number of days requested</label>
    <!-- the select needs the id so the JS code can grab it!-->
    <select name='numberDays' id="numberDays">
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
        <option value='5'>5</option>
    </select>
    <button type="button" onclick="dailyInfo()">Submit</button>
    </form></div>
    <div id='demo'>
    <table id="tableDaily"></table></div>

Answer 2

You say:

var numberDays = document.getElementById("numberDays").value;

But actually the element you are getting is the label:

<label id='numberDays'>

So numberDays has actually the value undefined then.

Instead, you should do:

<label for='numberDays'>

and then:

<select name='numberDays' id='numberDays'>

That should actually at least start the loop. And then the label > select relationships is actually working, for example you can click now also the label to focus on the select.

Answer 3

Access a selected option:

HTML

<select name="" id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
</select>

JavaScript

var select = document.getElementById("mySelect"),
  selectedOption = select.options[select.selectedIndex].text;

Get selected option text with JavaScript

In total (commented stuff)

function dailyInfo() {
  var dailyText = "";
  var numberDays = document.getElementById("numberDays");
  numberDays = numberDays.options[numberDays.selectedIndex].text;
  dailyText += "<table class='table'><tr><th>Weather Forecast</th></tr>";

  for (var i = 0; i < numberDays; i++) {
    dailyText += "<tr><td>Day: " + (i + 1) + "</td>";
    dailyText += "<td>" + /*dailyJsonObject.list[i].temp.min +*/ "&#8451</td>";
    dailyText += "<td>" + /*dailyJsonObject.list[i].temp.max +*/ "&#8451</td>";
    dailyText += "<td>" + /*dailyJsonObject.list[i].weather[0].description*/ +"<img src ='http://openweathermap.org/img/w/'" + /*dailyJsonObject.list[i].weather[0].icon +*/ ".png' /></td>";

  }
  document.getElementById("demo").innerHTML = dailyText;
  dailyText += "</tr></table>";
}

<form id="numberDay">
  <label>Number of days requested</label>
  <select id='numberDays' name='numberDays'>
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
        <option value='5'>5</option>
    </select>
  <button type="button" onclick="dailyInfo()">Submit</button>
</form>
<div id='demo'>
  <table id="tableDaily"></table>
</div>