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

S

spivee

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.
 
D

DJ Majestik

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.
 
M

McKirahan

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.
Click to expand...

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

McKirahan

DJ Majestik said:
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.
Click to expand...

The OP's code showed that
"onMouseOver" calls "doGetUrl()" which calls "handleResponse()".
 
S

spivee

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

spivee

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);
}
 
M

McKirahan

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);
}
Click to expand...

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Why doesn't the function get called? 1
window.location doesn't seem to work 8
I am trying to make an audio player, how do I get the selected file to be playable? 5
I am trying to detect Which image id="" was clicked ? 22
Trying to add text into an editable div that is in an iframe 0
Angularjs newbie - second JSON datasource does not display 0
Mandatory Elements To Conduct JavaScript Form Manipulation 7
setting getElementById().value equal to variable value 2

Members online

No members online now.
Total: 26 (members: 0, guests: 26)
Robots: 452

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,051
Latest member
CarleyMcCr

Latest Threads

Top