BEGINNER - getElementById

Hey guys,

Thanks for taking the time to read my post. I am not new to programming or scripting, but I am completely new to javascript and web-based code. Hopefully you guys could help me understand what is going on and maybe help me figure out what I am trying to do.

What I am trying to do:
-There is an element that has a value
<td class="flashField" onmouseover="clearAnswer()">
<div id="flashAnswer" onmouseover="clearAnswer()">answer string here</div>
</td>

-There is a text box that needs to have the answer above given to it
<td class="flashField">
<input type="text" tabindex="1" onkeypress="clearAnswer()" name="q" maxlength="256" size="50">
</td>

-There is a next button that needs to be executed
<td align="right">
<input type="image" tabindex="2" alt="Next" src="http://website.com/images/next.gif">
</td>

So what I am trying to do is create a script through Greasemonkey that will automatically do these things. I am starting small and trying to just get the value of flashAnswer to appear as an alert on the screen by using this code:
var answer = document.getElementById('flashAnswer');
alert(answer);

But the problem is it posts some weird value ([object XrayWrapper [object HTMLDivElement]]) that most definitely is not "answer string here" and is a bit above me at this point. Any ideas?

Any help would be great guys!

Thanks!
-ellosiph

Try changing var answer = document.getElementById('flashAnswer'); to var answer = document.getElementById('flashAnswer').firstChild;

Let me know what happens, I'm not sure if this will work or not.

Actually, scratch that. Use var answer = document.getElementById('flashAnswer').innerHTML;

That did it! The alert window shows the string now!! thanks a lot :) now the next step is figuring out how to fill in that textbox with the answer string.. I stumbled upon a way to do it if the box had like an element ID, but this one does not :\ it would have been something like this I think:

var answer = document.getElementById('flashAnswer').innerHTML;
document.getElementById('boxIdHere').value(answer);

But I am assuming it is impossible to assign it a value that way since it does not have a an ID.

<td class="flashField">
<input type="text" tabindex="1" onkeypress="clearAnswer()" name="q" maxlength="256" size="50">
</td>

Are there any other methods I could use to fill it out??

Thanks again!
-ellosiph

For example: Give it an id and use ".value = ..." instead of ".value(...)"

hmm.. that seems to make sense, but how would I assign the text box an ID? More specifically, how would I select that specific flashField and assign it an ID??

Thanks for the quick responses guys!

Or is there a way I can use getElementsByName to assign it a value?? it is the only element with the name "q".

A right ... Greasemonkey ... I almost forgot ;-)

Let's assume that at least the name="q" is unique on the page. Then you could do something in the lines of

var myInput = document.getElementsByName('q')[0];
myInput.value = "new value";

If it is not unique, you'll have to try different index values like [1], [2] etc.

Excellent! That got the correct string in the box! I see now that it is all about assigning it to an array so you can give it a value... cool stuff!! Now I wonder if there is a way I can automate it so it executes the "next" (or submit) function..

<td align="right">
<input type="image" tabindex="2" alt="Next" src="http://website.com/images/next.gif">
</td>

This is the first instance where I don't need to get or assign data, I just need to replicate a user clicking the "next" button.. Do you guys know a function that would do this??

You guys are awesome!

-ellosiph

Your input is obviously part of a form with an action? Does it have an id or name? You'll need to find out how to uniquely address the form ...

One of the following

//form has an id
var myForm = document.getElementById('FormID');

// form as a unique name
var myForm = document.getElementsByName('FormName')[0];

// there are several elements with the same name and the form is in position x
var myForm = document.getElementsByName('FormName')[x];

// the form neither has an id nor a name ... it is just a plain form tag ... the only one on the page
var myForm = document.getElementsByTagName('form')[0];

// you can access one of the form's input elements, then you can get its form
var myForm = document.getElementsByName('InputName')[0].form;


// if you have the form you just need to submit() it
myForm.submit();

Hmmm, that is the weird thing, when inspecting the element with firebug, the span it will go without going to a different part of the page is this:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td align="right">
<input type="image" tabindex="2" alt="Next" src="http://www.website.com/images/next.gif">
</td>
</tr>
</tbody>
</table>


So I am not seeing an ID or a name for it :\ ..interesting.

-ellosiph

This is not the <form> element ... it's the form element that is important here