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

Stack Overflow用户

提问于 2013-04-16 22:25:33

回答 1查看 1K关注 0票数 1

我正在尝试使我的页面，以便用户可以输入一个介于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>

javascript

arrays

image

textbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-04-16 22:29:56

也许你的意思是：

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";
          }
      }
   }
}