Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    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.
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Actually, scratch that. Use var answer = document.getElementById('flashAnswer').innerHTML;
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    For example: Give it an id and use ".value = ..." instead of ".value(...)"

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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".
    Last edited by ellosipher; 07-20-2011 at 10:39 PM.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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
    Code:
    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.

  • #8
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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
    Code:
    //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();
    Last edited by devnull69; 07-21-2011 at 08:48 AM.

  • #10
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #11
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    This is not the <form> element ... it's the form element that is important here


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •