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