It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Programming JavaScript Forum

get element by ID

get element by ID

Postby epictree on Fri Sep 17, 2010 7:52 pm

Hi all

Sorry in advance for my ignorance, but I just started javascript today.
I wrote a little script with a condition. If the condition is true the stuff inside a <p> element should be altered, but For some reason I can't see how to do this I looked up for the DOM, but i didn't find <p> in there.

If someone maybe has an idea on how to achieve this (or maybe a nice alternative)please let me know, All tips and hints are welcome.

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>JAVA SCRIPT TEST PAGE</title>
        <script type="text/javascript">
           function my_first_function(){
               var text1 = 'monkeys';
               if (document.getElementById(input)!= text1){
                   document.write(document.getElementById(p_element)='wrong text');
               }else{
                   document.write(document.getElementById(p_element)='your correct');
               }
           }
        </script>
    </head>
        <body>   
            <input type="text" size="30" id="input" onchange="my_first_function()" value="" />
            <br />
            <p id="p_element">This is just default text.</p>
        </body>
</html>


btw, I wasn't sure if this was the right thing to get the element by ID
epictree
 
Posts: 3
Joined: Fri Sep 17, 2010 7:37 pm

Re: get element by ID

Postby HotNoob on Mon Sep 20, 2010 10:17 pm

Alright, here is a quick tip

when a word is not in quotes it is a variable, therefore p_element will be calling an undefined variable, so you have to put it in quotes, 'p_element'
Code: Select all
document.getElementById('p_element');


document.write(value) is a function that writes the value on the page; in old browsers it writes it at that location, however in almost all modern browsers, it is completely useless, because it doesnt do what it is supposed to anymore.

To change the value inside an html tag, you need to use the innerHTML variable child.
---
Here is your code re-written:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>JAVA SCRIPT TEST PAGE</title>
        <script type="text/javascript">
           function my_first_function()
           {
               var text = 'monkeys';
               if (document.getElementById('input').value != text)
               {
                   document.getElementById('p_element').innerHTML ='wrong text';
               }
               else
               {
                    document.getElementById('p_element').innerHTML='your correct';
               }
           }
        </script>
    </head>
    <body>
        <input type="text" size="30" id="input" onKeyUp="my_first_function()" value="" />
        <br />
        <p id="p_element">This is just default text.</p>
    </body>
</html>

hopefully that helps you get an idea of how it works; btw onChange is a bit sketchy to use, so i just changed it to onKeyUp.
HotNoob
100+ Club
 
Posts: 169
Joined: Sun May 02, 2010 1:38 am

Re: get element by ID

Postby epictree on Mon Sep 20, 2010 11:30 pm

Awesome Thanks a lot for your detailed reply and the extra tips.
I sure do have a lot to learn :D
Have a nice evening!
epictree
 
Posts: 3
Joined: Fri Sep 17, 2010 7:37 pm

Re: get element by ID

Postby HotNoob on Tue Sep 21, 2010 1:09 am

your welcome :D
HotNoob
100+ Club
 
Posts: 169
Joined: Sun May 02, 2010 1:38 am


Who is online

Users browsing this forum: No registered users and 5 guests