Can't pass DOM object to function without breaking everything

[Guest]

Javascript is incredibly frustrating.

 

I'm trying to display a paragraph beneath a select field based on what the user selects. I have these two functions:

 

function toggleDisplay(myId) {
  if (document.getElementById(myId).style.display == 'none') {
    document.getElementById(myId).style.display = 'block';
  } else {
    document.getElementById(myId).style.display = 'none';
  }
}

function changeValue(fieldId1, fieldId2) {
  document.getElementById(fieldId1).value = document.getElementById(fieldId2).value;
}

 

Both of these functions work fine independently. Now, here is my select field with a text field above it to store the previous value of the select field:

 

<input type="text" id="prevValue" value="" />
<select id="thisValue" onChange="toggleDisplay(document.getElementById(prevValue).value);changeValue('prevValue', 'thisValue');toggleDisplay(this.value);">

 

Here is the way I want it to work once a user selects a value from the select field:

[*]The element with the corresponding id in the text field is closed

[*]The value in the text field is changed to the value selected by the user from the select field

[*]The element with the corresponding id selected by the user from the select field is opened

 

Of course, it does absolutely NOTHING unless I take out toggleDisplay(document.getElementById(prevValue).value); from the select field. This makes it:

 

<input type="text" id="prevValue" value="" />
<select id="thisValue" onChange="changeValue('prevValue', 'thisValue');toggleDisplay(this.value);">

 

As soon as I take that part out, both functions work again. Why can't I pass the object document.getElementById(prevValue).value to the toggleDisplay function without breaking everything?!

 

Any help at all is appreciated.

[Guest]

I thought for sure I found the problem, but I didn't. I forgot to put quotes around 'prevValue' in my object reference:

 

<input type="text" id="prevValue" value="" />
<select id="thisValue" onChange="toggleDisplay(document.getElementById('prevValue').value);changeValue('prevValue', 'thisValue');toggleDisplay(this.value);">

 

Still doesn't work.

[Guest]

I feel like such an idiot when I answer my own questions.

 

I had to set the value of the text field to something by default, and make a dummy element with that id in the document.

 

It would be nice if JavaScript threw errors of some sort... like "toggleDisplay() failed: No object matches that id." or something.

[KevinM1]

I feel like such an idiot when I answer my own questions.

 

I had to set the value of the text field to something by default, and make a dummy element with that id in the document.

 

It would be nice if JavaScript threw errors of some sort... like "toggleDisplay() failed: No object matches that id." or something.

 

Use Firebug while you develop.  It has nice JavaScript errors.

[Guest]

Hmm, never used it for that. I will now! Thanks for the tip.

[pahunrepublic]

There is avery good example here too http://www.fejos.net/progtech/05/see-how-ajax-and-php-are-working-together/ where HTML form values has relation in the javascript.