Embedding image in JS Array

[Maria80386]

Is it possible to embed an image into a javascript array?
For example, I have a flashcard app with the category, question, answer, and card number. I'd like for either the question or the answer to be an image.

The code:

var wordbank = new Array ("");
wordbank[0] = new Array("Help","This is the question","This is the answer","1");

Can any sort of an image be linked in the question or answer part of the above array?

Thanks for any ideas, even links to the needed section for RTFM answers.

[lucy24]

Is it considered cheating to use "eval" in conjunction with either an URL or some other type of link, entered into the array as literal text?

There's also get(put)ImageData used in conjunction with an HTML5 canvas. Technically the resulting data is some enormously long text string that can be handled just like any other text, which presumably includes shoving it into an array. But you're probably not going the canvas* route, or you wouldn't need all this array business in the first place.


* Usable by all browsers, and also by MSIE >= 9. Not appropriate if your audience includes schools.

[Maria80386]

I've tried entering images as:
document.get
img src=
pic:
.appendChild

and a few other variations. I've seen some rather creative and unhelpful errors, mainly [object getObject] and [object HTMLImageElement].

Am trying to keep this simple enough for me to understand it, thus have avoided canvas.

[lucy24]

Hey, that's not bad. It means the javascript knows what you're talking about, it's just in the wrong form. (I see this a lot in debugging: "Give me a hint, javascript. When I ask you for a widget, what are you showing me?" and then the answer is something in brackets.)

Why can't the page use blahblah.innerHTML?

:: looking vaguely around for fotiman or someone like him, who actually speaks javascript ::

[Fotiman]

Before I get to your question, I just want to point out that you should avoid using new Array(). Instead, use an array literal. It avoids the overhead of the "new", and is slightly smaller. For example, you code above could be re-written:

var wordbank = [
  ["Help","This is the question","This is the answer","1"],
  ["Another","Another question","Another answer","2"]
];

Now to your question...

Do want an image object stored in the array, or do you just want the image source URL to be stored? For example, storing the source would just be something like:

var wordbank = [
  ["Help","This is the question","http://example.com/img/answer1.png","1"],
  ["Another","Another question","http://example.com/img/answer2.png","2"]
];

Then in your JavaScript code, you could do something like:

var answer1img = document.getElementById('answer1img');
answer1img.src = wordbank[0][2];

Or you could append a new image to the document:

var answer1container = document.getElementById('answer1container');
var answer1img = document.createElement('img');
answer1img.src = wordbank[0][2];
answer1container.appendChild(answer1img);

Storing the URL string is generally going to be the easiest solution if that works for you.

:: looking vaguely around for fotiman or someone like him, who actually speaks javascript ::

Fotiman.respond("Here I am!");

:)

[Maria80386]

Thank you! I will try these and report back.

alert("big hugs");