Question

I’ve got a simple javascript program that I’m using for a project. To explain it simply, it just displays a random word on a html page from an external js file, say like Car, Bus, Train, Boat, etc. The word chosen each time is randomly selected. So, on one load it might say Bus, then another time it might say Airplane.

I want to assign static pieces of information to each of the words now, and I’m trying to figure out, what’s the easiest way for me to implement this? For example, I still want the data to be randomly selected, but if it says Bus I want to show a picture of a bus or display some other data, but only when Bus is selected, and the same goes for all the other words.

Answer 1

Make an array of objects:

var wordList = [
 {
  "word" : "Bus",
  "image" : "http://www.example.com/bus.jpg"
 },
 {
  "word" : "Airplane",
  "image" : "http://www.example.com/airplane.jpg"
 }
]

Then you can reference them by:

var busWord = wordList[0].word;
var airplaneImage = wordList[1].image;

Once you have your random number, you can generate your pairs accordingly:

var rand = Math.floor((Math.random()*wordList.length)+1);
var myWord = wordList[rand].word;
var myImage = wordList[rand].image;