For循环仅适用于特定值

Question

我有10张图片（pic1.jpg，pic2.jpg，pic3.jpg ...），我正在尝试制作两个输入字段，在这里我可以输入要显示的最后一张和第一张图片。 我已经弄清楚了，但是我的循环仅适用于特定值。 当我输入1和10或5和9时它将起作用，但是例如5和10将不起作用。 我究竟做错了什么？ 我的程序设计老师也无法弄清楚。

档案结构：

```
project
│   index.html
│   js-intro.js
│
└───pics
    │   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);

Answer 1

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

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

至

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