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

仅适用于特定值的For循环

1 个答案: