Newbie Question - variable name in getElementById() method doesn't seem to work

Discussion in 'Javascript' started by spivee@gmail.com, Jan 30, 2006.

  1. Guest

    Okay, I'm really new to javascript and the DOM... This isn't a
    functional script. I'm not trying to DO anything, just messing around
    to see how things work...

    I'm trying to call an onMouseOver event, and pass it an element id
    (assigned to a DIV element) and a URL, then have my javascript make a
    request to the server and retrieve a text document. For some reason,
    the first method I pass the variable to can call the
    document.getElementById(id) function without problems. But when I try
    to pass that 'id' variable to another method, it then sees that
    variable as 'undefined'.

    Here's my code...

    the html tag...

    <a href="#" id="myHref"
    onMouseOver="doGetUrl('myTest','my.txt')">change content</a><br>
    <div id="myTest"></div>

    The first method...

    function doGetUrl(id,url) {
    var http = createRequestObject();
    sendRequest(url);
    // this changes the div element's contents just fine
    document.getElementById(id).innerHTML = id;
    handleResponse(id);
    }

    The second method...

    function handleResponse(id) {
    // this errors out saying getElementById(id) is undefined.
    document.getElementById(id).innerHTML = 'changed';
    // if I just print the value of 'id' it shows as undefined
    // document.write("id="+id);
    // I do more stuff here to set the inner html for the
    // myTest div to the contents of the txt file
    // if I do document.getElementById('myTest').innerHTML here,
    // it works fine... rest of my code not really relevant here
    // ... i think...
    ....
    }

    It seems to me that the variable isn't being passed to the second
    function correctly. I'm not understanding why.
     
    , Jan 30, 2006
    #1
    1. Advertising

  2. DJ Majestik Guest

    Where do you call your second method from (handleResponse)? If you do
    it before the page is loaded, the div hasn't been created yet and
    therefore, is not there to change the innerHTML. Try putting the
    handleResponse in the body onload event:

    <body onload="handleResponse('myTest');">

    That should work if the first one works.
     
    DJ Majestik, Jan 30, 2006
    #2
    1. Advertising

  3. McKirahan Guest

    <> wrote in message
    news:...
    > Okay, I'm really new to javascript and the DOM... This isn't a
    > functional script. I'm not trying to DO anything, just messing around
    > to see how things work...
    >
    > I'm trying to call an onMouseOver event, and pass it an element id
    > (assigned to a DIV element) and a URL, then have my javascript make a
    > request to the server and retrieve a text document. For some reason,
    > the first method I pass the variable to can call the
    > document.getElementById(id) function without problems. But when I try
    > to pass that 'id' variable to another method, it then sees that
    > variable as 'undefined'.
    >
    > Here's my code...
    >
    > the html tag...
    >
    > <a href="#" id="myHref"
    > onMouseOver="doGetUrl('myTest','my.txt')">change content</a><br>
    > <div id="myTest"></div>
    >
    > The first method...
    >
    > function doGetUrl(id,url) {
    > var http = createRequestObject();
    > sendRequest(url);
    > // this changes the div element's contents just fine
    > document.getElementById(id).innerHTML = id;
    > handleResponse(id);
    > }
    >
    > The second method...
    >
    > function handleResponse(id) {
    > // this errors out saying getElementById(id) is undefined.
    > document.getElementById(id).innerHTML = 'changed';
    > // if I just print the value of 'id' it shows as undefined
    > // document.write("id="+id);
    > // I do more stuff here to set the inner html for the
    > // myTest div to the contents of the txt file
    > // if I do document.getElementById('myTest').innerHTML here,
    > // it works fine... rest of my code not really relevant here
    > // ... i think...
    > ....
    > }
    >
    > It seems to me that the variable isn't being passed to the second
    > function correctly. I'm not understanding why.
    >


    I didn't have your problem -- after commenting out:

    var http = createRequestObject();
    sendRequest(url);

    But why would you assign two values to the same item?

    document.getElementById(id).innerHTML = id;
    document.getElementById(id).innerHTML = 'changed';
     
    McKirahan, Jan 30, 2006
    #3
  4. McKirahan Guest

    "DJ Majestik" <> wrote in message
    news:...
    > Where do you call your second method from (handleResponse)? If you do
    > it before the page is loaded, the div hasn't been created yet and
    > therefore, is not there to change the innerHTML. Try putting the
    > handleResponse in the body onload event:
    >
    > <body onload="handleResponse('myTest');">
    >
    > That should work if the first one works.


    The OP's code showed that
    "onMouseOver" calls "doGetUrl()" which calls "handleResponse()".
     
    McKirahan, Jan 30, 2006
    #4
  5. DJ Majestik Guest

    GOod catch, sorry. Feels like a Friday!
     
    DJ Majestik, Jan 30, 2006
    #5
  6. Guest

    Thanks for the quick replies...

    Majestik.. The page loads completely before handleResponse is called.
    It doesn't get called until the onMouseOver event occurs. Handling the
    response on load would defeat the purpose of the test, since I'm trying
    to get new content to load when a user creates an event like
    onMouseOver().

    McKirahan,

    I am changing the element twice just to test. The first one gives what
    the value of id is at that point and the second will change assuming
    that the document.getElementById(id).innerHTML is successfully updated.

    I hadn't thought of commenting out sendRequest(), but that seems to fix
    the problem, sorta.. since sendRequest() is important to the entire
    point of the script..

    Here's the entire code, slightly modified since last time, but
    basically, the same thing. If this is run as is, the print I get in
    handleResponse() shows the id is undefined. If I comment out
    sendRequest(), then the id successfully passes through. I've no clue
    how this is changing the id variable since that variable isn't passed
    to sendRequest..

    I built this code using several things I've found on the internet.. I
    think my problem is with the line in sendRequest()
    http.onreadystatechange = handleResponse;
    Not entirely certain what that's doing.... However, if you change line
    37 and set id to 'myTest', then the script works fine..

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html>
    <head>

    <script language="JavaScript">
    <!-- hide from non java browsers

    function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
    ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
    ro = new XMLHttpRequest();
    }
    return ro;
    }

    var http = createRequestObject();

    function sendRequest(url) {
    http.open('get', url);
    http.onreadystatechange = handleResponse;
    http.send(null);
    }

    function handleResponse(id) {

    document.getElementById('handleresponse').innerHTML = "The ID in
    handleResponse() is " + id;
    if(http.readyState == 4){
    var response = http.responseText;
    var update = new Array();
    if(response.indexOf('|' != -1)) {
    update = response.split('|');
    var data = update[0];
    document.getElementById(id).innerHTML = data;
    }
    }
    }

    function doGetUrl(id,url) {
    document.getElementById('geturl').innerHTML = "The ID in doGetURL()
    is " + id;
    sendRequest(url);
    handleResponse(id);
    }

    -->
    </script>
    </head>

    <body>
    <div style="position:absolute;" id="myTest">myTest</div>
    <br><br>
    <a href="#" id="myHref"
    onMouseOver="doGetUrl('myTest','myfile')">change content</a>
    <div id="geturl"></div>
    <div id="geturl2"></div>
    <div id="handleresponse"></div>
    </body>
    </html>
     
    , Jan 30, 2006
    #6
  7. Guest

    Okay, I'm swift as a fork in the road.. Finally found the solution,
    though it seems odd to me... I took the handleResponse(id) out of
    doGetUrl() and changed the sendRequest() function as follows and it
    works.

    function sendRequest(url, id) {
    http.open('get', url);
    http.onreadystatechange = function() { handleResponse(id) }
    http.send(null);
    }
     
    , Jan 30, 2006
    #7
  8. McKirahan Guest

    <> wrote in message
    news:...
    > Okay, I'm swift as a fork in the road.. Finally found the solution,
    > though it seems odd to me... I took the handleResponse(id) out of
    > doGetUrl() and changed the sendRequest() function as follows and it
    > works.
    >
    > function sendRequest(url, id) {
    > http.open('get', url);
    > http.onreadystatechange = function() { handleResponse(id) }
    > http.send(null);
    > }
    >


    How about simplifying your code. Watch for word-wrap.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>doGetUrl.htm</title>
    <script type="text/javascript">
    function createRequestObject() {
    var ret = null;
    if (window.ActiveXObject) {
    try {
    ret = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {}
    } else if(window.XMLHttpRequest) {
    try {
    ret = new XMLHttpRequest();
    } catch(e) {}
    }
    return ret;
    }
    function doGetUrl(id,url) {
    var http = createRequestObject();
    http.open('get', url, false);
    http.send(null);
    var response = http.responseText;
    if (response.indexOf('|' != -1)) {
    var update = response.split('|');
    var data = update[0];
    document.getElementById(id).innerHTML = data;
    }
    }
    </script>
    </head>
    <body>
    <div id="myTest">myTest</div>
    <br><br>
    <a href="#" id="myHref" onMouseOver="doGetUrl('myTest','myfile')">change
    content</a>
    </body>
    </html>


    And you don't need
    id="myHref"
    as it's not referenced.

    I haven't validated (per w3c) your code; I just made it work.

    However, it would be noce to have a sample of what is returned;
    apparently it must be a string with "|" in it...
     
    McKirahan, Jan 31, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bobby Chamness
    Replies:
    2
    Views:
    2,401
    Joe Smith
    Apr 22, 2007
  2. tshad
    Replies:
    29
    Views:
    1,038
    tshad
    Sep 7, 2007
  3. nick
    Replies:
    2
    Views:
    197
  4. Replies:
    12
    Views:
    211
    2obvious
    Feb 4, 2005
  5. weston
    Replies:
    2
    Views:
    131
    weston
    Jul 19, 2005
Loading...

Share This Page