Having basic javascript issue

[Matt Kohanek]

Hey there. So I have an html page that has this image (sorry I hadto cut off the < in the beginning and not put it between code tags, it was messing the image text up when I did that...):

img id="avatar_image" src="./images/SampleImage_Icon.png" width="128" height="128"/>

At the top of this html page in the header I have

 <script type="text/javascript" src="./js/ext-core-debug.js"></script>
<script type="text/javascript" src="./js/view-core.js"></script>
<script type="text/javascript" src="./js/survey-logic.js"></script>   

So I can use various javascript files.

The view-core.js file does various things, one of which is to change the image from the code above when a function is called. Here is the relevant bit of code:

var avatarEvents = ['question_displayed', 'hover_event', 'focus_event', 'answer_selected', 'answer_changed'];
function Update_Avatar(avatarEvent)
{
	if (avatarEvent === avatarEvents[0] || avatarEvent === 0)
	{
		//question_displayed
		//
		avatar_image.src="./images/lepr.gif";

	}
	else if (avatarEvent === avatarEvents[1] || avatarEvent === 1)
	{
		//hover_event
		//
		avatar_image.src="./images/lepr.gif";
	}
	else if (avatarEvent === avatarEvents[2] || avatarEvent === 2)
	{
		//focus_event
		//
		avatar_image.src="./images/lepr.gif";
	}
	else if (avatarEvent === avatarEvents[3] || avatarEvent === 3)
	{
		//answer_selected
		//
		avatar_image.src="./images/lepr.gif";
	}
	else if (avatarEvent === avatarEvents[4] || avatarEvent === 4)
	{
		//answer_changed
		//
		avatar_image.src="./images/lepr.gif";
	}
}

As you can see, right now, all i want to happen is for anytime one of these is called, it changes the image to lepr.gif

In the other js file - survey-logic.js, I have a way of dynamically generating text areas, radio buttons, etc, but for this example we will just use the text area. I want to change the image from above using onFocus() event.
So, in the survey-logic.js file I have this:

	if (questionType == "text")
	{
		resolved_Template = '<textarea onFocus="Update_Avatar(focus_event)"  id="answer{0}" cols="80" rows="4">{1}</textarea><br><br>';
	}    

Which in my head, should call the Update_Avatar() function from view-core.js, and change the image from my html page to ./images/lepr.gif whenever I focus on the text area. But this is not happening. So I think i either have a syntax issue with how I am using

 onFocus="Update_Avatar(focus_event)"

or
I am doing something wrong with this

avatar_image.src="./images/lepr.gif";

Someone mind giving me an idea where I might be screwing up here please?

[Bear Bibeault]

What errors are showing up in your Firebug log?

[Matt Kohanek]

Well first it was saying focus_event is undefined, so I changed that to "2" and it doesnt give me that error. Now it is saying avatar_image is undefinedm which I assume means I need something more than what I have here:

avatar_image.src="./images/lepr.gif";

[Bear Bibeault]

Is avatar_image defined?

[Matt Kohanek]

avatar_image is the image on my html page. I am wanting to change the src within it to whatever I put in view-core.js.

So I think I am needing something like document.GetElementById("avatar_image.src")="./images/lepr.gif"; but that still isn't quite it. But avatar_image is from this:

img id="avatar_image" src="./images/SampleImagIcon.png" width="128" height="128"/>

And again, Im sorry I cant put that in to code tags but it cuts out most of the text if I do

[Matt Kohanek]

If I use

GetElementById('avatar_image').src="./images/lepr.gif";

I get an error saying Object Expected

[Bear Bibeault]

You're flying blind if you don't have a good JavaScript reference at your side.

The method is document.getElementById.

[Matt Kohanek]

I was just this second about to post that I figured out the problem....capital G instead of lower case g ><
It is always the small things eh?

This is the final code that worked:

	else if (avatarEvent === avatarEvents[2] || avatarEvent === 2)
	{
		//focus_event
		//
		var image;
		image=document.getElementById('avatar_image');
		if(image){
			image.src="./images/lepr.gif";
		}
		
	}    

[Bear Bibeault]

If you are sure that the image will exist on the page, you can vastly simplify that code to a single statement.

[Matt Kohanek]

Yeah, i know how, I just was breaking it down further and further as i was trying to get it to work. But thanks for the tip, I will be doing so, I just wanted to show what I was going for in case anyone else sees this and it can help them.