View Full Version : BEGINNER - getElementById

07-20-2011, 10:26 PM
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>

-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">

-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">

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');

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!


07-20-2011, 10:41 PM
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.

07-20-2011, 10:48 PM
Actually, scratch that. Use var answer = document.getElementById('flashAnswer').innerHTML;

07-20-2011, 10:59 PM
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;

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">

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

Thanks again!

07-20-2011, 11:16 PM
For example: Give it an id and use ".value = ..." instead of ".value(...)"

07-20-2011, 11:22 PM
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".

07-20-2011, 11:38 PM
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.

07-20-2011, 11:51 PM
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">

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!


07-21-2011, 09:45 AM
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

07-21-2011, 09:18 PM
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%">
<td align="right">
<input type="image" tabindex="2" alt="Next" src="http://www.website.com/images/next.gif">

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


07-22-2011, 10:11 AM
This is not the <form> element ... it's the form element that is important here