For-loop 仅适用于特定值答案

【问题标题】：For-loop only working with specific valuesFor-loop 仅适用于特定值
【发布时间】：2018-09-07 10:44:03
【问题描述】：

我有 10 张图片（pic1.jpg、pic2.jpg、pic3.jpg...），我正在尝试创建两个输入字段，我可以在其中输入要显示的最后一张和第一张图片。我已经弄清楚了，但我的循环只适用于特定的值。当我输入 1 和 10 或 5 和 9 时它会起作用，但例如 5 和 10 将不起作用。我究竟做错了什么？我的编程老师也想不通。

文件结构：

``` 项目 │ index.html │ js-intro.js │ └────图片 │ pic1.jpg │ pic2.jpg | ... | pic10.jpg ```

HTML：

<b>First pic: </b> <input type="number" id="fromPic"> <br>
<b>Last pic: </b> <input type="number" id="toPic"> <br>
<button type="button" id="picButton">Show me!</button>
<div id="picDiv"></div>

JS：

var fromPicEl = document.querySelector("#fromPic");
var toPicEl = document.querySelector("#toPic");
var picButtonEl = document.querySelector("#picButton");
var picDivEl = document.querySelector("#picDiv");
var fromPicValue;
var toPicValue;
function showPic() {
  picDivEl.innerHTML = "";
  fromPicValue = fromPicEl.value;
  toPicValue = toPicEl.value;
  while (fromPicValue<=toPicValue) {
    picDivEl.innerHTML += "<img src='pics/pic" + fromPicValue + ".jpg'>";
    fromPicValue++;
  }
}
picButtonEl.addEventListener("click", showPic);

【问题讨论】：

标签： javascript html

【解决方案1】：

当您从输入字段中提取值时，它们是字符串格式。您需要将它们转换为整数以进行正确比较。改变

fromPicValue = fromPicEl.value;
toPicValue = toPicEl.value;

到

fromPicValue = parseInt(fromPicEl.value);
toPicValue = parseInt(toPicEl.value);

【讨论】：