Using varables

[landon11]

if I pass the name of an element to a function like this:


function afuction(x){
document.Form1.x.style.color = 'black';}

<button name="buttonA" onclick="afunction(buttonB);">Click</button>

<button name="buttonB">Hello</button>


I get this error: 'document.Form1.x' is null or not an element

[Borgtex]

There are a lot of different ways to do it, but you can try this one, that can be used in any form without need to specify the name.

function afunction(x)
{x.style.color = 'red';}

<form name="anyformname">
<button name="buttonA" onclick="afunction(this.form.buttonB);">Click</button>

<button name="buttonB">Hello</button>
</form>

[landon11]

Yep, that worked, but why didn't it work the way I was doing it if my form was Form1. I really can only pass in the name of the element.

[Roy Sinclair]

The reason it didn't work the way you originally tried it is because there's no variable within the document object named buttonB. The button isn't at the document object level, it's defined as a part of the form. document.forms.Form1.buttonB would have worked.

[Borgtex]

No, document.forms.Form1, will not work. if you say:

x=buttonB

and then

document.Form1.x.style.color

what you're really saying is something like:

document.Form1.document.Form1.buttonB.style.color, that is incongruous


But if for some reason (that I can't understand), you still want to use the same code, you can try this:


function afuction(x){
x.style.color = 'black';}

<button name="buttonA" onclick="afunction(buttonB);">Click</button>

<button name="buttonB">Hello</button>



that maybe don't works in Netscape
or


function afuction(x){
eval("document.Form1."+x+".style.color = 'black'");}

<button name="buttonA" onclick="afunction('buttonB');">Click</button>

<button name="buttonB">Hello</button>

[beetle]

Landon, to pass the name of the form element, you need to pass it as a string, and then eval() it later. As you have it in your first post, you are sending it as a variable buttonB which does not exist.function afuction(x){
var oElement = eval('document.Form1.'+x);
oElement.style.color = 'black';
}

<button name="buttonA" onclick="afunction('buttonB');">Click</button>

<button name="buttonB">Hello</button>

[TrueLies]

I'd suggest 3 things:

1] do not use <button>: use <input type="button" value="HALLO"> , that's the standard (without the hallo...)

2] You cannot pass a name that way: the best way would be to pass the full path, but if you insist on the name, two things here:
2b] pass it in between quotes: <input type="button" name="foofoo" onClick="func('foofoo')">. Note the nested single apex. foofoo or whatever literla, but no nested apes, no String data type.
2c] Fix the typo: afuction called like afuNction
3] Associative:
document.nomeForm.elements[aString].style.color="#ffff00"

So:
--------------
<script language="JavaScript"><!--
function afunction(x){
document.Form1.elements[x].style.color = "#0000ff";}
//--></script>
---------------
<form name="Form1">
<input type="button" name="buttonA" value="Click me" onclick="afunction('buttonB');">Click
<input type="button" name="buttonB" value="Hallo" style="color:#ff0000">Hello
</form>-------------------------

This works, immediately and without hassles.

The fact it works doesn't mean I reccomend it. I would suggest to you to use document.getElementById(String)

If somebody has to object, before objecting personally consider I didn't object to others.
Thank You.

[beetle]

Listen to TrueLies. I was too tired when I coded my reply, I completely missed the <button> tags, and forgot to use the elements collection. So, read his/her post. Not mine. :D