Call image from within a javascript function?

Question

Hi

On this site http://sleep.fm/coming-soon/

When user sets alarm sound and time, under "Set Alarm," their chosen time and alarm sound appears.

I want instead of for example, 2:00pm [X] (alarm set - weather) or 2:00pm [X] (alarm set - rooster) I want the image of weather or rooster to appear instead of it printing text.

This is the function that is printing the text

function getAlarmName(ind){
    if(ind==4) return "weather";
    else if(ind==3) return "flight";
    else if(ind==1) return "time";
    else return "rooster";
}

I tried removing "weather," and "flight," for example and adding instead image/weather.jpg and image/flight.jpg, but that is not the correct syntax.

Appreciate your suggestions!

cheers

Answer 1

Hey Pat, you should take all that images in an Array and then, inject them like this

Suppose your array is Images

function getAlarmName(ind){
     var theHtml = '<img href="'+Images[ind]+'" />';
     document.getElementById("destination").innerHTML = theHtml;
    //and so on
}

Hope this willl help you.

Answer 2

Use the Js Array object like this-

var Images=new Array();              // regular array (add an optional integer
Images[0]="imgurlofimage1.png";       // argument to control array's size)
Images[1]="imgurlofimage2.png";
Images[2]="imgurlofimage3.png";

OR

var Images=["imgurlofimage1.png","imgurlofimage2.png","imgurlofimage3.png"]; // literal array

Answer 3

You could try this:

function getAlarmName(ind){
    if(ind==4) return "<img src='image/weather.jpg' />";
    else if(ind==3) return "<img src='image/flight.jpg' />";
    else if(ind==1) return "<img src='image/time.jpg' />";
    else return "<img src='image/rooster.jpg' />";
}