Доступ к изображениям из массива?

Question

Мне нужно создать функцию, в которой пользователь может получить входной вопрос, и они могут видеть разные результаты. Это волшебная восьмимерная симуляция. Мне нужно использовать массив, но я не уверен, как это сделать с изображениями.

Вот что у меня есть сейчас.

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

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

Я не уверен, как это сделать, поэтому любая помощь будет оценена по достоинству. Кроме того, мне нужно сделать так, чтобы, когда пользователь вводит один и тот же вопрос, он всегда возвращает тот же результат. Мои инструкции должны были сделать это с помощью инструкции if. Опять же, любая помощь будет очень признательна.

Answer 1

использования, что URL в теге IMG, как это:

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

Но это не использовать массив. Где вам нужно было использовать массив? Массив URL-адресов изображений?

Answer 2

Создайте карту, используя объект, и сохраните каждый вопрос и полученный случайный маг в нем. Когда кто-нибудь задает вопрос, проверьте, что вы уже сопоставили этот вопрос с чем-то. Если да, используйте кешированный результат. Если нет, получите случайное изображение из вашего массива, а затем добавьте его в кэш:

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