/    Sign up×
Community /Pin to ProfileBookmark

help on obj.className value is undefined/null

Copy linkTweet thisAlerts:
Feb 27.2009

Good day,
I cant get the value of className of an object. everytime I try to display the className of an object by using window.alert(obj.className) the browser doesnt do anything. here is my code below:

javacript code for objTest.js:

[CODE]window.onload=initObj;
function initObj(){

var allTags=document.getElementsByTagName(“DIV”);

for(var i = 0; i<allTags.length;i++)
{

if(allTags[i].id.indexOf(“objTesting”) > -1){

allTags[i].onmouseover=function(){objOver(allTags[i]);}

}

}

}
function objOver(thisTag){
window.alert(“before changing class name = ” + thisTag.className);

}
[/CODE]

and here is my html code:

[CODE]<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<script type=”text/javascript” src=”objTest.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css.css” />

</head>

<body>
<div id=”wrap”>
<div id=”objTesting” class=”myclass1″>Testing</div>

</div>
</body>
</html>
[/CODE]

All I want is that if I roll over to that DIV with an id of ‘objTesting’ the className of that DIV will be disply in the window.alert….

any idea?

btw, I am practicing an unobtrusive method of scripting, so the scripting is all in external file.

thanks

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangFeb 27.2009 — allTags[i].onmouseover=function(){objOver([COLOR="Blue"]this[/COLOR]);}
Copy linkTweet thisAlerts:
@hizuka007authorFeb 28.2009 — @Fang, thanks for your help, it works...
Copy linkTweet thisAlerts:
@hizuka007authorFeb 28.2009 — @Fang, thank you it really works...

BTW,

Why is it that my code doesnt work?
[CODE]allTags[i].onmouseover=function(){objOver(allTag[i]);}[/CODE]

as you can see it is the same with your code:
[CODE]allTags[i].onmouseover=function(){objOver(this);}[/CODE]
except that you are using the word 'this' instead of my object variable 'allTag[i]', but aren't they the same?



Whats the difference anyway?







sorry for asking such question, but i really want to know why..





Thanks
Copy linkTweet thisAlerts:
@TheTeenScripterFeb 28.2009 — the "this" object referrer will only work if it is being used directly within the event handler of an object (will not work within a function as far as I know) here is an example <a onmouseover="this.style.color='red'"></a> will work, and <a onmouseover="hLite(this)"></a> will work, but function doThis() { this.style.color="red"; } will not.
Copy linkTweet thisAlerts:
@hizuka007authorFeb 28.2009 — I see.....

But why is that this code does not work?:
[CODE]allTags[i].onmouseover=function(){objOver(allTag[i]);}[/CODE]

objOver([B]allTag[i][/B]), if I use that allTag[i] javascript will only says that it is undefined. but if i use objOver([B]this[/B]), javascript recognize it...

my object [B]allTag[/B] is also equivalent to [B]this[/B], but why the data of it is not recognize in javacript?
Copy linkTweet thisAlerts:
@TheTeenScripterFeb 28.2009 — i'm not sure what "this" would stand for when placed inside of a function, if it actually means anything at all.. maybe somebody else can answer this??
Copy linkTweet thisAlerts:
@rpgfan3233Feb 28.2009 — Inside the anonymous function, 'allTags' is undefined. After all, 'allTags' is defined inside initObj(). 'this' refers to the object that is attached to the event, I think. Consider the following:
[code=php]// thisTest.js
function normalFunction(self, arg) {
alert('normalFunction() called on: ' + self.tagName + '#' + self.id
+ 'nWith arg: ' + arg);
}

function ooFunction() {
alert('Mouse over ' + this.tagName + '#' + this.id
+ '; calling normalFunction().');
normalFunction(this, 'Hello');
}

document.getElementById('PageContainer').onmouseover = ooFunction;[/code]
[code=html]<!-- thisTest.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Testing the 'this' object in JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<div id="PageContainer" style="background-color:#f00">&nbsp;</div>
<script type="text/javascript" src="thisTest.js"></script>
</body>[/code]

ooFunction() takes no arguments, and simply calls normalFunction(), which takes two arguments, the original object that called the function (self) and the argument (arg). The onmouseover event on the PageContainer DIV is bound to the ooFunction() function. I'm sure you can guess what happens if you move your mouse over the PageContainer DIV.
Copy linkTweet thisAlerts:
@hizuka007authorFeb 28.2009 — @rpgFan, ok I get it..thanks


But i have a question, why is that '[B]allTags[/B]' is undefined to anonymous function even if that anonymous function is inside the initObj function, which has an object decleration of '[B]allTags[/B]' ?
[CODE]function initObj(){
var allTags = document.getElementsByTagName("DIV");
.....
allTags[i].onmouseover=function(){objOver(allTags[i]);}

}[/CODE]

please enlighten me because I am very new to javascript.. thanks


btw, i've already corrected the error by removing anonymous function, but still i want to know the above question...
Copy linkTweet thisAlerts:
@ZeroKilledFeb 28.2009 — <i>
</i>function initObj(){
var allTags=document.getElementsByTagName("DIV");
for(var i = 0; i&lt;allTags.length;i++){
if(allTags[i].id.indexOf("objTesting") &gt; -1){
allTags[i].onmouseover=function(){objOver(allTags[i]);}
}
}
}

the previous code doesn't work for one fact, function [B]objOver[/B] in the onmouseover event is accesing an entry in [B]allTags[/B] that doesn't exists, hence an undefined error is thrown. explanation: programmers tend to believe that a value will remain as unique for each event when creating customized function[SIZE="1"][COLOR="DarkOrange"]1[/COLOR][/SIZE] that use variable iteration[SIZE="1"][COLOR="DarkOrange"]2[/COLOR][/SIZE] as part of the body. but unfortunately, isn't true. aside, there is a solution for this cases but is somewhat advanced for a beginner.

[SIZE="1"][COLOR="DarkOrange"]1[/COLOR][/SIZE]customized function, a function that appear to be the same in the code but when executed behave differently.

[SIZE="1"][COLOR="DarkOrange"]2[/COLOR][/SIZE]variable iteration, a mechanism to control loop cycles, in this case the counter [b]i[/b].

after each function are declared, every event call refer to the value of [b]i[/b] which would be, in this case, the length of [b]allTags[/b]. so, assuming [b]allTags[/b] have two entry, [b]i[/b] hold the number two at the end of the loop. now, when any of the event occur, what they are calling is [b]objOver(allTags[[COLOR="DarkOrange"]2[/COLOR]]);[/b]. as you may know, indexed object begin counting in zero and on. as you can imagine now, [b]allTags[2][/b] doesn't exists because it refer to the third entry. and even if they existed, none of the event call will work correctly because each one are supposed to refer an unique value. this happen because two main reason: the variable [b]i[/b] isn't declared with an unique value inside the scope of anonymous function and that variable is continually updated by the loop. so, they refer to the variable when is called, not when the function are assigned.

why is that 'allTags' is undefined to anonymous function even if that anonymous function[/quote]
[b]allTags[/b] aren't undefined inside the anonymous function. both, the variable and the function, are declared in the same scope. i would say that is a wrong explanation of [b]rpgfan3233[/b]. the reason [b]allTags[/b] appear to be undefined is explained above. consider the following code: what would happen if you alert the variable inside the anonymous function?
<i>
</i>allTags[i].onmouseover=function(){
alert(allTags);
objOver(allTags[i]);
}


instead, what would happen if you alert [b]allTags[/b] inside [b]objOver[/b] function? because [b]allTags[/b] is declared as local to [b]initObj[/b] and [b]objOver[/b] function isn't declared in the same scope as [b]allTags[/b], [b]objOver[/b] will display undefined. in conclusion, the access to a variable isn't ruled from where is called. instead, is ruled from where is declared.
Copy linkTweet thisAlerts:
@FangFeb 28.2009 — This:allTags[i].onmouseover=function(){objOver(allTags[i]);}
is the same as writing:&lt;div id="objTesting" class="myclass1" onmouseover="objOver(allTags[i]);"&gt;Testing&lt;/div&gt;
'i' will always be the value it was last set to. Usually a vlaue greater than the array length.

This can be circumvented, either with new Function (essentially an eval) or preferably a closure. In both these methods the value of 'i' is set in the function rather than at runtime.
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
window.onload=initObj; // Try the different functions

// doesn't work
function initObj(){
var allTags=document.getElementsByTagName("div");
for(var i=0; i&lt;allTags.length; i++) {
if(allTags[i].id.indexOf("objTesting") &gt; -1){
allTags[i].onmouseover=function(){objOver(allTags[i], i);}
}
}
}

// pass object, but can not pass a variable correctly
function initObjPassed(){
var allTags=document.getElementsByTagName("div");
for(var i=0; i&lt;allTags.length; i++) {
if(allTags[i].id.indexOf("objTesting") &gt; -1){
allTags[i].onmouseover=function(){objOver(this, i);}
}
}
}

// Requires global variable and use of new Function (eval)
var allTags=null; //global
function initNewFunction(){
allTags=document.getElementsByTagName("div");
for(var i=0; i&lt;allTags.length; i++) {
if(allTags[i].id.indexOf("objTesting") &gt; -1){
allTags[i].onmouseover=new Function('objOver(allTags['+i+'], '+i+');');
}
}
}

// No global, clean solution
function initClosure(){
var aDiv=document.getElementsByTagName("div");
for(var i=0; i&lt;aDiv.length; i++) {
if(aDiv[i].id.indexOf("objTesting") &gt; -1){
aDiv[i].onmouseover=function(i) {
return function(e) {objOver(aDiv[i], i);};
}(i);
}
}
}

function objOver(thisTag, count){
window.alert("before changing class name = " + thisTag.className + " Count = " + count);
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
div {width:10em;margin:1em;border:1px solid #999;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="objTesting1" class="myclass1"&gt;Testing1&lt;/div&gt;
&lt;div id="objTesting2" class="myclass2"&gt;Testing2&lt;/div&gt;
&lt;div id="objTesting3" class="myclass3"&gt;Testing3&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

The Definitive Guide http://oreilly.com/catalog/9780596101992/

The Good Parts http://oreilly.com/catalog/9780596517748/
Copy linkTweet thisAlerts:
@hizuka007authorFeb 28.2009 — ah ok, now i get it... so if you declare a costumized function in the event, then all local varialble becomes undefined if used inside the said costumized function (or anonymous function)...

ok thankyou very much to your replies... now i know, and I will avoid using such function (customized/anonymous or whatever u call it ? ) when firing an event.
×

Success!

Help @hizuka007 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...