Accessing Images from an array?

Question

I need to create a function where the user can access input question , and they can see different results. It's a magic eight ball simulation. I need to use an array, but i'm not sure how to do this with images.

Here's what I have now.

function eightBall() {
            var answer = document.getElementById('questBox').value;
            answer = answer.toLowerCase();

            if (answer.search(/[?]/) > -1) {
                var no = '../images/eightBallNo.png';
                $('#answerImages').html(no);
            }
        }

I'm not sure how to do this, so any help would be appreciated. In addition, I need to make it so that when the user enters the same question, it always returns the same result. My instructions were to do this through an if statement. Again, any help would be greatly appreciated.

Be kind and rewind.... wait, wrong domain... oh yeah, up vote, down vote, comment on or edit your question, select an answer, or close your question :) — G. Shearer
– G. Shearer, Commented Mar 4, 2013 at 17:23

veddermatic · Accepted Answer · 2013-03-01 18:40:18Z

Create a map using an object and store each question and the resulting random mage in it. When somebody asks a question, check to see if you've already mapped that question to something. If so, use the cached result. If not, get a random image from your array, and then add it to the cache:

// empty cache to use
var answerMap = {}
// array of your images
var images = ['image_1.png', 'image_2.png', ... 'image_n.png'];

function eightBall() {
   var imageToUse = false;
   var answer = document.getElementById('questBox').value;
   answer = answer.toLowerCase();
   // this syntax could be wrong, I forget the check as my JS is rusty
   // check the cache to see if we got asked this before
   if (answerMap[answer] != undefined) {
      // if so, use the cached image value
      imageToUse = answerMap[answer];
   } else {
      // otherwise, get a random image, and add it to the cache
      var randomIndex = Math.floor(Math.random()*images.length);
      imageToUse = images[randomIndex];
      answerMap[answer] = imageToUse;
   }
   // do whatever you need to do with the image
}

mrk · Accepted Answer · 2013-03-01 18:35:09Z

0

Use that URL in an IMG tag, like this:

var no = '../images/eightBallNo.png';
$('#answerImages').html('<img src='+no+'/>');

But, this doesn't use an array. Where were you needing to use an Array? An Array of image urls?

answered Mar 1, 2013 at 18:35

mrk

5,1273 gold badges29 silver badges42 bronze badges

3 Comments

Alan Joseph Sylvestre Over a year ago

I didn't know the easiest way to do this. I thought an array would work, but couldn't a string of images work as well?

mrk Over a year ago

An array of image urls would be better than one string with all the URLS in it -- then you'd have to parse that string or break that string into substrings -- sounds messy, error-prone. So using an Array would be more simple and easier not to break things.

Alan Joseph Sylvestre Over a year ago

Actualy, I ned to use a string function. I just re-read the details in more depth. Any ideas? I'm completely lost when it comes to this.

Collectives™ on Stack Overflow

Accessing Images from an array?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related