Question

我的作业有问题。我的for循环似乎没有运行，我不确定我做错了什么。变量dailyText打印＆＃34;天气预报＆＃34;在一个表中但似乎没有进入for循环。我不确定这是否是一个范围问题或者发生了什么。

该脚本应该从表单选项中获取一个数字，并创建一个包含许多行的表。

非常感谢任何帮助！

＆＃13;

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>";
}

＆＃13;

<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>

＆＃13;

Answer 1

您已使用numberDays所需的ID命名标签。这意味着循环使用标签值而不是预期的实际输入。

见下文的更改：

<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

你说：

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

但实际上你得到的元素是标签：

<label id='numberDays'>

因此，numberDays实际上具有值undefined。

相反，你应该这样做：

<label for='numberDays'>

然后：

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

实际上至少应该开始循环。然后标签＆gt;选择关系实际上是有效的，例如你现在也可以点击标签来专注于选择。

Answer 3

访问所选选项：

<强> 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

总计（评论内容）

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>

对于循环意外结束

3 个答案: