如何更改數組中的圖像基於JavaScript中的文本框輸入？

我試圖讓我的頁面，以便用戶可以鍵入1到200之間的數字值，以獲取他們想要查看的圖像。我玩過代碼，但我似乎無法獲得任何工作。以下是我嘗試過的代碼。我究竟做錯了什麼？如何更改數組中的圖像基於JavaScript中的文本框輸入？

編輯：新代碼：

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

來源

2013-04-16 Elgo

構建映像名稱'如果（this.value.length === 1,2,3）{'爲什麼你期待這一點工作？ – 2013-04-16 22:30:43

也許你的意思是這個：

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/

變化的總結：

在循環中預加載圖像而不是複製代碼
構建圖像名稱dynamica LLY
讓img變量一個局部變量，而不是一個隱含的全球與var在它前面
檢查是否輸入字段爲空
使用parseInt()輸入字段的值解析成數
範圍檢查解析數
如果在有效範圍內，然後使用該號碼

來源

2013-04-16 22:29:55 jfriend00

使用所做的更改使文本框顯示，但是在將值輸入到框中時圖像不會更改;另外，我的按鈕不再有效。我將在原始問題中更新我的代碼以反映它目前的狀況。 – Elgo

@Elgo - 我在我的代碼中修正了一個錯字並更正了它。你可以看到我的代碼在這裏工作：http://jsfiddle.net/jfriend00/4dqbP/ – jfriend00

謝謝，框現在工作！我將如何解決我的按鈕問題？代碼在上一個/下一個的原始文本中。 – Elgo

如何更改數組中的圖像基於JavaScript中的文本框輸入？

回答

相關問題