How To Change Image in Array Based on Textbox input in JavaScript?

Question

I'm trying to make my page so a user can type a number value between 1 and 200 to get to whichever image they want to view. I've played around with the code, but I can't seem to get anything to work. Below is my code that I've tried to do this with. What am I doing wrong?

Edit: New Code:

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

if (this.value.length === 1,2,3) { Why do you expect this to work? — user1106925
– user1106925, Commented Apr 16, 2013 at 22:30

jfriend00 · Accepted Answer · 2013-04-16 23:37:16Z

1

Perhaps you mean for this:

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

to be this:

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

In addition, I think you want to be converting the whole input value to a number, not using the individual keycodes.

I might suggest this different/simpler way of doing this that is much more DRY (don't repeat yourself):

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

Working Demo: http://jsfiddle.net/jfriend00/4dqbP/

Summary of changes:

Preload images in a loop rather than copied code
Construct image names dynamically
Make img variable to a local variable rather than an implicit global with var in front of it
Check to see if the input field is empty
Use parseInt() to parse the value of the input field into a number
Range check the parsed number
If in valid range, then construct the image name using that number

edited Apr 16, 2013 at 23:37

answered Apr 16, 2013 at 22:29

jfriend00

711k104 gold badges1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Elgo Over a year ago

Using your changes made the text box display, however the image will not change when a value is entered into the box; additionally, my buttons no longer worked. I'm going to update my code in the original question to reflect what it currently is.

jfriend00 Over a year ago

@Elgo - I fixed a typo in my code and corrected it. You can see my code work here: jsfiddle.net/jfriend00/4dqbP

Elgo Over a year ago

Thanks, the box works now! How would I fix the issue with my buttons? The code is in the original text for the previous/next.

jfriend00 Over a year ago

@Elgo - You can see a version with next and previous here: jsfiddle.net/jfriend00/vsBFM

Elgo Over a year ago

Thank you so much, you were a huge help. I definitely couldn't have done it without you. When I get up to 15 rep, I'll come back and upvote this. Thanks again, and have a good one.

|

Collectives™ on Stack Overflow

How To Change Image in Array Based on Textbox input in JavaScript?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related