IE Error (as per the norm): Object Expected

[dalefish]

As usual, develop something in FF and as soon as you get near IE everything decides to pack up and go home.

I'm getting an object expected error, forgive me if it's simple, I'm new to JavaScript.

HTML Code

<div id="tabsCon" class="tabsContainer">
<span id="tab1" class="activeTab" onclick="javascript:changeTab('tab1');">Tab 1</span>
<span id="tab2" class="inactiveTab" onclick="javascript:changeTab('tab2');">Tab 2</span>
<span id="tab3" class="inactiveTab" onclick="javascript:changeTab('tab3');">Tab 3</span>
<span id="tab4" class="inactiveTab" onclick="javascript:changeTab('tab4');">Tab 4</span>
<span id="tab5" class="inactiveTab" onclick="javascript:changeTab('tab5');">Tab 5</span>
<span id="tab6" class="inactiveTab" onclick="javascript:changeTab('tab6');">Tab 6</span>
</div>

JavaScript

function changeTab(tab){
	tabCont = document.getElementById('tabsCon');
	items = tabCont.getElementsByTagName('span');
	var len = items.length;
	for (i=1;i<=len;i++){
		if (document.getElementById('tab'+i).getAttribute('class') ==  "activeTab" || document.getElementById('tab'+i).getAttribute('className' ==  "activeTab")
			document.getElementById('tab'+i).setAttribute("class", "inactiveTab");
			document.getElementById('tab'+i).setAttribute("className", "inactiveTab");
		}
	obj2 = document.getElementById(tab);
	obj2.setAttribute("class", "activeTab");
	obj2.setAttribute("className", "activeTab");
	http.open('get', page+'?task=changeTab&tab='+tab);
       http.onreadystatechange = handleResponse;
       http.send(null);
	}

There is obviously more to the .js file but I've included what matters.
As I say, it's all working in firefox, any help would be greatly appreciated.

[Airshow]

My guess is that IE is behaving correctly in that it is rejecting "javascript:" in those onclicks. I am amazed that FF handles it ok as I believe it is not obliged to.

With onclick, onmouseover, onmouseout etc. etc. browsers know to expect javascript. Little appreciated, you implicitly write an anonymous javascript function.

You should never need to do it (it is bad practice), but code written into an HTML href attribute does need the "javascript:" prefix. This is because browsers know to expect a normal (hyperlink) URL and need to be told otherwise.

Airshow

[dalefish]

Thanks for the reply.

Unfortunatley that doesn't seem to be it, unless I've completely lost my way.

<span id="tab1" class="activeTab" onclick="changeTab('tab1')">Tab 1</span>

<span id="tab1" class="activeTab" onclick="changeTab('tab1');">Tab 1</span>

Both still giving errors. Is my application of your comment incorrect, if so please tell me. As I say, very new to JavaScript.

As a side note, on a different site I've got other JS functions in onclick attributes running AJAX updates, example:

<a href="#stay" onclick="javascript:revokeInvite('11','81');">

Working fine in both IE and FF.

Any ideas greatly appreciated.

Cheers for the help.

[Airshow]

Dale,

Well it was a good theory while it lasted. You appear to have done exactly what I suggested.

Does IE give you a line number where the error occurs? That would help. If you don't see error messages then double click the yellow !triangle bottom-left (assuming your version of IE is anything like 6) - otherwise you'll have to dive into Internet Options > Advanced (I think) to turn on js error reporting.

NOTE: If js code is in a separate file then IE's standard error messages have a bad habit of reporting line numbers as one too great, and also report them as being in the host file not the 'included' file!!

It could be that the code is breaking down within changeTab() rather than where it is called from the HTML.

Airshow

[dalefish]

Airshow,

Thanks for the reply, I was about to mark the post solved.

Turns out it was a completely unrelated error about 200 lines below the changeTab() function in the js file. Using a reserved word as a function argument, quick change and all is good.

Well I say all is good, the function the error was in still doesn't work in IE, but at least it runs in FF and IE compiles the script. I'm running a setTimeout to change (slide) a span style from width:0 and visibility:hidden to a specific width, generated before width:0 is added with offsetWidth, and visibility:visible. Simple sliding span, or so I thought. C'est la vie, it's not throwing any errors so I'm going to do a little trial and error, see if I can't work it out and learn something.

Cheers for the help.

[Airshow]

Dale,

Good luck. Visual effects like that are very satisfying to get working.

Airshow

[erect1kus]

Try putting this in <head> section:
<meta http-equiv="Content-Script-Type" content="text/javascript">

I had a similar problem with IE 7, upgraded to IE 8, and had same
problem, with following line:

<input type="text" name="myText" onKeyPress="changeVal()" value="new">

IE did not recognize changeVal() as an object. Unbelievable, yet typical MS crap. Of course, FF had no problem.

If you are only using javascript scripts, this is fine and you do not have to qualify the <script> tag.

[Troy III]

As usual, develop something in FF and as soon as you get near IE everything decides to pack up and go home.

I'm getting an object expected error, forgive me if it's simple, I'm new to JavaScript.

HTML Code

<div id="tabsCon" class="tabsContainer">
<span id="tab1" class="activeTab" onclick="javascript:changeTab('tab1');">Tab 1</span>
<span id="tab2" class="inactiveTab" onclick="javascript:changeTab('tab2');">Tab 2</span>
<span id="tab3" class="inactiveTab" onclick="javascript:changeTab('tab3');">Tab 3</span>
<span id="tab4" class="inactiveTab" onclick="javascript:changeTab('tab4');">Tab 4</span>
<span id="tab5" class="inactiveTab" onclick="javascript:changeTab('tab5');">Tab 5</span>
<span id="tab6" class="inactiveTab" onclick="javascript:changeTab('tab6');">Tab 6</span>
</div>

JavaScript

function changeTab(tab){
	tabCont = document.getElementById('tabsCon');
	items = tabCont.getElementsByTagName('span');
	var len = items.length;
	for (i=1;i<=len;i++){
		if (document.getElementById('tab'+i).getAttribute('class') ==  "activeTab" || document.getElementById('tab'+i).getAttribute('className' ==  "activeTab")
			document.getElementById('tab'+i).setAttribute("class", "inactiveTab");
			document.getElementById('tab'+i).setAttribute("className", "inactiveTab");
		}
	obj2 = document.getElementById(tab);
	obj2.setAttribute("class", "activeTab");
	obj2.setAttribute("className", "activeTab");
	http.open('get', page+'?task=changeTab&tab='+tab);
       http.onreadystatechange = handleResponse;
       http.send(null);
	}

There is obviously more to the .js file but I've included what matters.
As I say, it's all working in firefox, any help would be greatly appreciated.

You are kidding, right?!
No matter what broswer you test this on, will not work at all.
Although invisible to novice attention. What 'explorer'?! It contains errors, javascript errors, therefore your statement is false. It shall faill in fx and any other browser.
But this code should not:

function changeTab(tab){
	var tabCont = document.getElementById('tabsCon');
	var items = tabCont.getElementsByTagName('span');
	var len = items.length;
	for (i=1;i<=len;i++){
  if (document.getElementById('tab'+i).getAttribute('class') == "activeTab" || document.getElementById('tab'+i).getAttribute('className' ==  "activeTab")){
	document.getElementById('tab'+i).setAttribute("class", "inactiveTab");
	document.getElementById('tab'+i).setAttribute("className", "inactiveTab") }
	}
	var	obj2 = document.getElementById(tab);
		obj2.setAttribute("class", "activeTab");
		obj2.setAttribute("className", "activeTab");
/*		http.open('get', page+'?task=changeTab&tab='+tab);
		http.onreadystatechange = handleResponse;
		http.send(null);
*/	}

[! I've isolated last lines of code because its externaly dependant]
Colored parts are all errors; from red hot to a warning green.
Your main loop conditional evaluator is not closed, so the addressed object fails to get picked. So here we are, the error report is correct!
You are also violating global space with undeclared variable names causing mixed scope reference. Your declared "len" variable is not sharing the same space with two previously undeclared 'vars' which in fact, will not be treated as vars but properties of the top host scripting object.
The last but not the least is missing {} after the loop conditional. It is legal, but not safe.
p.s.:
- who wrote this code?

OK
That would be all.
Regards and happy coding.