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>
4

1 に答える 1

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/

変更の概要:

  1. コピーされたコードではなく、ループでイメージをプリロードする
  2. イメージ名を動的に構築する
  3. その前にある暗黙imgのグローバルではなく、変数をローカル変数にしますvar
  4. 入力フィールドが空かどうかを確認する
  5. parseInt()入力フィールドの値を数値に解析するために使用します
  6. 解析された数値の範囲チェック
  7. 有効な範囲内にある場合は、その番号を使用してイメージ名を作成します
于 2013-04-16T22:29:55.557 に答える