# Help! Why can't I use image buttons with this piece of JavaSript?

**URL:** https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476
**Category:** Factual Questions
**Created:** [November 19, 2002, 5:56am UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476 "2002-11-19T05:56:02Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![matt\_mcl](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@matt\_mcl](https://boards.straightdope.com/u/matt_mcl)
#### Post date: [November 19, 2002, 5:56am UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/1 "2002-11-19T05:56:02Z")

</div>

OK. I want to use a drop-down navigation menu with an image button. Knowing nothing about javascript, I grab the following code from a code engine:

> [@](#):
>
> \<head\>  
> \<script\>  
> \<!–  
> function land(ref, target)  
> {  
> lowtarget=target.toLowerCase();  
> if (lowtarget=="\_self") {window.location=loc;}  
> else {if (lowtarget=="\_top") {top.location=loc;}  
> else {if (lowtarget=="\_blank") {window.open(loc);}  
> else {if (lowtarget=="\_parent") {parent.location=loc;}  
> else {parent.frames[target].location=loc;};  
> }}}  
> }  
> function jump(menu)  
> {  
> ref=menu.choice.options[menu.choice.selectedIndex].value;  
> splitc=ref.lastIndexOf("\*");  
> target="";  
> if (splitc!=-1)  
> {loc=ref.substring(0,splitc);  
> target=ref.substring(splitc+1,1000);}  
> else {loc=ref; target="\_top";};  
> if (ref != “”) {land(loc,target);}  
> }  
> //–\>  
> \</script\>
> 
> \</head\>
> 
> \<body text = white bgcolor = black link = white alink = white vlink = white topmargin = 0 leftmargin = 0\>\<basefont face = “Arial Narrow,Verdana” size = 1\>  
> \<base target = “\_top”\>
> 
> \<!-- snip --\>
> 
> \<form action=“dummy” method=“post”\>\<select name=“choice” size=“1”\>\<option value=""\>Select an auxiliary installation\</option\>\<option value=“stcharles/index.html”\>St. Charles\</option\>\<option value=“youville/index.html”\>Youville\</option\>\</select\>\<input TYPE=“button” VALUE="–\>" onClick=“jump(this.form)”\>\</form\>

Now then, I try to replace the button with a tag to create an image button, that I found somewhere else. Here it is: \<input type = “image” src = “…/rnav.jpg” onClick=“jump(this.form)”\>

And it doesn’t work! I have no idea why. (I’m basically a Chinese box when it comes to anything like this. Would someone please tell me why it doesn’t like the image button and how I should fix it?

---

<div class="post-metadata">

### Author: ![ptr2void](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/ptr2void/32/3406_2.png) [@ptr2void](https://boards.straightdope.com/u/ptr2void)
#### Post date: [November 19, 2002, 11:20am UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/2 "2002-11-19T11:20:10Z")

</div>

Javascript is not my expertise, but I think I may see the problem: the “loc” variable in the land function has no context and should be changed to “ref”. You’re passing the “loc” variable from the jump function into the land function as a variable named “ref”.

Hope this helps!

---

<div class="post-metadata">

### Author: ![Armilla](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@Armilla](https://boards.straightdope.com/u/Armilla)
#### Post date: [November 19, 2002, 12:47pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/3 "2002-11-19T12:47:21Z")

</div>

Basically, image buttons are roughly equivalent to Submit buttons. Clicking on the image will try to submit the form that contains it.

I’d replace it with just an image. You can either capture the onclick event in the image tag itself, or wrap the whole thing in a javascript link:

```auto

<img src = "../rnav.jpg" onclick="jump(this.form)">

```

or

```auto

<a href="javascript:jump(this.form)"><img src="../rnav.jpg"></a>

```

(Note the space in “javascript” above has been added by the board for security reasons. Take it out if you use the code.)

I have a feeling you may need to supply a name attribute to the form tag and then instead of using “this.form” in the event code use something more like “document.formname”.

Hope this helps.

---

<div class="post-metadata">

### Author: ![matt\_mcl](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@matt\_mcl](https://boards.straightdope.com/u/matt_mcl)
#### Post date: [November 19, 2002, 2:08pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/4 "2002-11-19T14:08:07Z")

</div>

I implemented all of these things, in series and parallel, and none of them worked. With the button, though, they worked just the same as the listed code. ☹ I don’t get it.

---

<div class="post-metadata">

### Author: ![Monstre](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@Monstre](https://boards.straightdope.com/u/Monstre)
#### Post date: [November 19, 2002, 2:52pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/5 "2002-11-19T14:52:34Z")

</div>

> [@](#):
>
> Basically, image buttons are roughly equivalent to Submit buttons. Clicking on the image will try to submit the form that contains it.

Right – the image button is equivalent to “Submit”, not to a generic button. However, you **can** still make such a button follow an event handler instead (in this case, “onClick”), but in some of the event handlers, you need to override the default action of the button.

The default action of this button is to attempt to submit the form – which is to run a program called “dummy” (obviously, there is no such program in this case – the intent is to run the event handler instead).

The “onClick” event handler allows you to override the default action of the button by doing a “return false”. Change this:

```auto

onClick="jump(this.form)"

```

to this:

```auto

onClick="jump(this.form); return false"

```

I tried it on a page of my own, and it tried to go to the appropriate URL, instead of going to “dummy” (which is the form submit action). So, it worked for me.

---

<div class="post-metadata">

### Author: ![ptr2void](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/ptr2void/32/3406_2.png) [@ptr2void](https://boards.straightdope.com/u/ptr2void)
#### Post date: [November 19, 2002, 3:05pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/6 "2002-11-19T15:05:29Z")

</div>

Monstre…way to go…a simple return statement!

Can you explain why the scoping problem I surmised in my reply above is not actually a problem? How is the land function getting the (correct) value of loc (in the original script) when it seems it should be out of scope?

Thanks!

---

<div class="post-metadata">

### Author: ![Monstre](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@Monstre](https://boards.straightdope.com/u/Monstre)
#### Post date: [November 19, 2002, 4:38pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/7 "2002-11-19T16:38:02Z")

</div>

_Monstre…way to go…a simple return statement!_

By the way, I tried this out on Netscape, and it appears that Netscape (at least v. 4.7) doesn’t like it, still. Although the “return false” from the onClick is correct and part of the specifications in Javascript, I believe.

On that note, there isn’t much rhyme or reason or consistency to the “return” values from the event handlers. Some event handlers have a value you can return to do something (like in this case), and some don’t. onClick just happens to be one of the more common ones people use, so this one is good to know.

> [@](#):
>
> Can you explain why the scoping problem I surmised in my reply above is not actually a problem? How is the land function getting the (correct) value of loc (in the original script) when it seems it should be out of scope?

Well, I’d start by saying that it looks like pretty poor coding to me. I tested a few things out, and it appears that if you simply create a variable (without declaring it with “var”), it is global. This would explain why the scope issue is not a problem.

Now, in that “jump” function, try starting out the “loc” variable with a proper declaration:

```auto

var loc;

```

Then, you should get an error from the “land” function, since “loc” would be considered a local variable of “jump” only. (I got a script error when I tried this).

However, as it is, this variable was simply used without a declaration – and I didn’t realize this before, but it looks like this creates it automatically as a global variable. I tested this out by throwing some alert statements in the functions to print out the values of the variables (in pop-up boxes) during the processing of the functions. You could try this too. Example:

alert('loc = ’ + loc);  
alert('ref = ’ + ref);

So, if “loc” is global, then there really was no need for the first parameter on the “land” function (the parameter “ref” – which is never actually used in the function). So regardless of the intent, it’s still poor and understandably confusing coding.

So, where did you find that code, **matt**?

---

<div class="post-metadata">

### Author: ![matt\_mcl](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@matt\_mcl](https://boards.straightdope.com/u/matt_mcl)
#### Post date: [November 19, 2002, 4:52pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/8 "2002-11-19T16:52:43Z")

</div>

[EchoEcho.Com Tools - Tools](http://www.echoecho.com/tooldropdown.htm) .

Anyway: YES! It now works, with this code:

> [@](#):
>
> \<form name=“noodle” action=“dummy” method=“post”\>\<select name=“choice” size=“1”\>\<option value=""\>Select an auxiliary installation\</option\>\<option value=“stcharles/index.html”\>St. Charles\</option\>\<option value=“youville/index.html”\>Youville\</option\>\</select\>\<img src = “…/rnav.jpg” onClick=“jump(document.noodle); return false”\>

I hope it works on other people’s machines 🙂

---

<div class="post-metadata">

### Author: ![ptr2void](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/ptr2void/32/3406_2.png) [@ptr2void](https://boards.straightdope.com/u/ptr2void)
#### Post date: [November 19, 2002, 6:57pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/9 "2002-11-19T18:57:08Z")

</div>

> [@](#):
>
> \*Originally posted by Monstre \*  
> By the way, I tried this out on Netscape, and it appears that Netscape (at least v. 4.7) doesn’t like it, still. Although the “return false” from the onClick is correct and part of the specifications in Javascript, I believe.

Figures…I never had any luck with Netscape until 6.x. In any case, Matt, I checked it out on IE6 on XP Pro, Mozilla 1.01 and Opera 6.1 (both on Linux) and it seems to be OK, if that’s any help.

> [@](#):
>
> Well, I’d start by saying that it looks like pretty poor coding to me. I tested a few things out, and it appears that if you simply create a variable (without declaring it with “var”), it is global. This would explain why the scope issue is not a problem.

A-ha…contrary to my every instinct as a C/C++ programmer 😃

Thanks for the info!

---

<div class="post-metadata">

### Author: ![matt\_mcl](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@matt\_mcl](https://boards.straightdope.com/u/matt_mcl)
#### Post date: [November 19, 2002, 7:23pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/10 "2002-11-19T19:23:08Z")

</div>

> [@](#):
>
> In any case, Matt, I checked it out on IE6 on XP Pro, Mozilla 1.01 and Opera 6.1 (both on Linux) and it seems to be OK, if that’s any help.

The code as I’ve quoted it in the OP?

---

<div class="post-metadata">

### Author: ![Monstre](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@Monstre](https://boards.straightdope.com/u/Monstre)
#### Post date: [November 19, 2002, 9:28pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/11 "2002-11-19T21:28:21Z")

</div>

> [@](#):
>
> A-ha…contrary to my every instinct as a C/C++ programmer

Yes, mine too! But since Javascript is a very loosely-typed interpreted language, it makes sense that this type of thing is allowed. Happens in some other web page languages too, like the server side scripting language, PHP. To create variables, you just start using them (no declarations).

I hadn’t realized until now that Javascript would allow creating variables like this, though – the normal way is to use “var” to create one, so I hadn’t ever bothered to try otherwise.

---

<div class="post-metadata">

### Author: ![ptr2void](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/ptr2void/32/3406_2.png) [@ptr2void](https://boards.straightdope.com/u/ptr2void)
#### Post date: [November 19, 2002, 9:36pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/12 "2002-11-19T21:36:25Z")

</div>

> [@](#):
>
> \*Originally posted by matt\_mcl \*  
> \*\*The code as I’ve quoted it in the OP? \*\*

With this code:

```auto

<form action="dummy" name="noodle" method="post"><select name="choice" size="1">
<option value="">Select an auxiliary installation</option><option value="stcharles/index.html">St. Charles</option><option value="youville/index.html">Youville</option></select><input
type="image" src="../apache_pb.gif" onClick="jump(document.noodle); return false;"></form>

```

i.e., with the addition of Monstre’s return statement.

The jump and land functions are as in the OP.

---

<div class="post-metadata">

### Author: ![ptr2void](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/ptr2void/32/3406_2.png) [@ptr2void](https://boards.straightdope.com/u/ptr2void)
#### Post date: [November 19, 2002, 9:38pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/13 "2002-11-19T21:38:39Z")

</div>

Oops, sorry I hosed the thread format…hit submit instead of preview! :o

I AM a newbie, after all! 😃

---

<div class="post-metadata">

### Author: ![Monstre](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@Monstre](https://boards.straightdope.com/u/Monstre)
#### Post date: [November 19, 2002, 10:45pm UTC](https://boards.straightdope.com/t/help-why-cant-i-use-image-buttons-with-this-piece-of-javasript/137476/14 "2002-11-19T22:45:17Z")

</div>

\*Oops, sorry I hosed the thread format…hit submit instead of preview!

I AM a newbie, after all! \*

```auto

Newbie::~Newbie()
{
   delete ptr2void;
}

```

😃
