Question

我正在尝试创建我的页面，因此用户可以键入1到200之间的数字值，以获得他们想要查看的任何图像。我玩过这些代码，但似乎无法解决任何问题。下面是我尝试使用的代码。我做错了什么？

编辑：新代码：

`
<html>
<head>
<title></title>
</head>
<body style="background-color: teal;">
<form>
<center>
<div width="50%" style="width: 50%;">
<div id="main" align="middle">
<img src="page1.jpg" alt="" id="mainImg" height="90%">
</div> 
<div id="imglist">
<a href="javascript:previousImage('mainImg')"><img src="previous.png" alt="" 
align="left"></a>
<input id="myid" name="myid" size="3" type="text"></input>
<a href="javascript:nextImage('mainImg')"><img src="next.png" alt="" align="right"></a>
<script>
var imgArray = new Array();

var imgs = [];
for (var i = 0; i < 200; i++) {
imgs[i] = new Image();
imgs[i].src = "page" + (i + 1) + ".jpg";
}


function nextImage(element)
    {
    var img = document.getElementById(element);

    for(var i = 0; i < imgArray.length;i++)
    {
        if(imgArray[i].src == img.src) // << check this
        {
            if(i === imgArray.length){
                document.getElementById(element).src = imgArray[0].src;
                break;
            }
            document.getElementById(element).src = imgArray[i+1].src;
            break;
        }
    }
}

function previousImage(element)
{
   var img = document.getElementById(element);

   for(var i = 0; i < imgArray.length;i++)
  {
      if(imgArray[i].src == img.src)
      {
         if(i === 0){
            document.getElementById(element).src = imgArray[imgArray.length-1].src;
            break;
         }
         else{
            document.getElementById(element).src = imgArray[i-1].src;
            break;
         }
      }
   }
}

window.onload = function() {
   var elm = document.getElementById("myid"),
   var img = document.getElementById("mainImg");
   elm.onkeyup = function(event) {
      if (this.value) {
         var num = parseInt(this.value, 10);
             if (num >= 1 && num <= 200 {
            img.src = "page" + num + ".jpg";
         }
      }
   }
} 
</script>
</div>
</div>
</center>
</form>
</body>
</html>

Answer 1

也许你的意思是：

if (this.value.length === 1,2,3) {

是这样的：

if (this.value.length <= 3) {

此外，我认为您希望将整个输入值转换为数字，而不是使用单个密钥代码。

我可能会建议这样做的另外/更简单的方式DRY（不要重复自己）：

// preload images
var imgs = [];
for (var i = 0; i < 200; i++) {
    imgs[i] = new Image();
    imgs[i].src = "page" + (i + 1) + ".jpg"; 
}

window.onload = function() {
   var elm = document.getElementById("myid");
   var img = document.getElementById("mainImg");
   elm.onkeyup = function(event) {
      if (this.value) {
          var num = parseInt(this.value, 10);
          if (num >= 1 && num <= 200) {
              img.src = "page" + num + ".jpg";
          }
      }
   }
}

工作演示：http://jsfiddle.net/jfriend00/4dqbP/

变更摘要：

以循环方式预装图像而不是复制代码
动态构建图像名称
将img变量设为局部变量，而不是前面带有var的隐式全局变量
检查输入字段是否为空
使用parseInt()将输入字段的值解析为数字
范围检查已解析的数字
如果在有效范围内，则使用该数字构建图像名称

如何在JavaScript中基于文本框输入更改数组中的图像？

1 个答案: