problem with getElementById under IE 7

P

Pawel_Iks

I write following script which change font-size for the text in
element with id="p1" and display current font-size in element with
id="p2". I want to know why the following code is processed corectly
by Firefox and there are some error in IE 7?

<html>
<head>
<title>JavaScript example - getElementById</title>

<script type="text/javascript">
var fontSizeTab=new Array();
fontSizeTab=["5pt","6pt","7pt","8pt","9pt","10pt","11pt","12pt","13pt","14pt","15pt","16pt","17pt","18pt","19pt","20pt","22pt","23pt","24pt","25pt"];
var indx=5;

function increaseSize()
{
p2=document.getElementById('p2');
if (indx<fontSizeTab.length-1)
{
indx++;
p2.innerHTML="<b>rozmiar:</b> "+fontSizeTab[indx];
}
else
p2.innerHTML+=" <b>górna granica</b>";

obj=document.getElementById("p1");
obj.style.fontSize=fontSizeTab[indx];

}
function decreaseSize()
{
p2=document.getElementById("p2");
if (indx>0)
{
indx--;
p2.innerHTML="<b>rozmiar:</b> "+fontSizeTab[indx];
}
else
p2.innerHTML+=" <b>dolna granica</b>";

obj=document.getElementById("p1");
obj.style.fontSize=fontSizeTab[indx];
}
</script>

</head>
<body>

<form name="form1">
<input type="button" value="+" onClick="increaseSize();"/>
<input type="button" value="-" onClick="decreaseSize();"/>
</form>

<p id="p1" name="p1" style="font-size:10pt;">
some text here
</p>
<p id="p2" name="p2">
</p>

</body>
</html>
 
D

David Mark

I write following script which change font-size for the text in
element with id="p1" and display current font-size in element with
id="p2". I want to know why the following code is processed corectly
by Firefox and there are some error in IE 7?
Click to expand...

What error?
<html>
<head>
  <title>JavaScript example - getElementById</title>

<script type="text/javascript">
var fontSizeTab=new Array();
fontSizeTab=["5pt","6pt","7pt","8pt","9pt","10pt","11pt","12pt","13pt","14p­t","15pt","16pt","17pt","18pt","19pt","20pt","22pt","23pt","24pt","25pt"];
Click to expand...

Points are for printing.
var indx=5;

function increaseSize()
{
Click to expand...

Why not leave this to the browser?

[snip]

Can you indicate which line threw the exception and what the error
message was? If not, post a link to the page.
 
E

Evertjan.

Pawel_Iks wrote on 14 feb 2008 in comp.lang.javascript:
I write following script which change font-size for the text in
element with id="p1" and display current font-size in element with
id="p2". I want to know why the following code is processed corectly
by Firefox and there are some error in IE 7?

function increaseSize()
{
p2=document.getElementById('p2');
Click to expand...

use:

var p2 = document.getElementById('p2');

try this:

=======================================
<html>
<head>
<title>JavaScript example - getElementById</title>

<script type='text/javascript'>

var indx=5;

function changeSize(w) {
w = w.value;
var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
if (!(indx<1 && w=='-') && !(indx>15 && w=='+')) {
indx = (w=='+')
? indx+1
: indx-1;
p2.innerHTML = '<b>rozmiar:</b> '+ (indx+5) + 'pt';
p1.style.fontSize = (indx+5) + 'pt';
} else {
p2.innerHTML = '<b>rozmiar:</b> '+ (indx+5) + 'pt' +
((w=='+')
? ' <b>górna granica</b>'
: ' <b>dolna granica</b>');
};
};

</script>

</head>
<body>

<input type='button' value='+' onClick='changeSize(this);'>
<input type='button' value='-' onClick='changeSize(this);'>

<p id='p1' style='font-size:10pt;'>Some text here</p>
<p id='p2'><b>rozmiar:</b> 10pt</p>

</body>
</html>
=======================================
 
P

Pawel_Iks

Pawel_Iks wrote on 14 feb 2008 in comp.lang.javascript:



use:

var p2 = document.getElementById('p2');
Click to expand...

it works now, but I don't understand where was the problem and why
FireFox processed this script and IE 7 didn't. Can anybody give me
some explanation for this?
 
P

Pawel_Iks

Can you indicate which line threw the exception and what the error
message was? If not, post a link to the page.
Click to expand...

yes, the exception was thrown when script try to process line with
p2=document.getElementById('p2');
and the message was: 'Object doesn't attand this method' (I'm not sure
that this message will be looked the same in your computer becouse I
have it in my native language - polish, and I translated it into
english, I hope, that without mistakes).

When I changed this line to
var p2=document.getElementById('p2');
as advised me one guy from here, everything was all right (in IE 7,
in FIreFox both scripts runs without any problems).
 
E

Evertjan.

Pawel_Iks wrote on 14 feb 2008 in comp.lang.javascript:
it works now, but I don't understand where was the problem and why
FireFox processed this script and IE 7 didn't. Can anybody give me
some explanation for this?
Click to expand...

Sure.

IE defines p2 automaticly as an object to the element having that id
value,
while FF does not.

So IE complains if you give a value to p2 without specificly stating var
as a redefinition statement, as you cannot assign anything directly to an
object, which stands to reason.

IE's inner programming stinks anyway so just cope with that.

This is all very basic and you can find it in the FAQ:

<http://www.jibbering.com/faq/#FAQ4_41>

<http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pag
es:Using_the_W3C_DOM#Accessing_Elements_with_the_W3C_DOM>
 
J

Jeremy J Starcher

it works now, but I don't understand where was the problem and why
FireFox processed this script and IE 7 didn't. Can anybody give me some
explanation for this?
Click to expand...

IE likes to turn a lot of things into global variables and play other odd
games that no other browser does.

Because you had an element with the id of 'p2' IE created a global
variable called 'p2' as well. You were trying to overwrite what IE has
done.

The word 'var' that Evertjan put in your function created a /local/
variable called 'p2' that had nothing what-so-ever to do with any other
'p2' anywhere. That 'p2' only existed inside your function and
disappears when the function is over.

Evertjan is right, this is all basic Javascript. You'd do well to read
the group FAQ and learn the difference between local and global
variables. Unless you have some specific need to make something global,
they should be local.
 
E

Evertjan.

Jeremy J Starcher wrote on 14 feb 2008 in comp.lang.javascript:
IE likes to turn a lot of things into global variables and play other
odd games that no other browser does.

Because you had an element with the id of 'p2' IE created a global
variable called 'p2' as well. You were trying to overwrite what IE
has done.

The word 'var' that Evertjan put in your function created a /local/
variable called 'p2' that had nothing what-so-ever to do with any
other 'p2' anywhere. That 'p2' only existed inside your function and
disappears when the function is over.

Evertjan is right, this is all basic Javascript. You'd do well to
read the group FAQ and learn the difference between local and global
variables. Unless you have some specific need to make something
global, they should be local.
Click to expand...

No, I do not think it is the local/global variable difference:

A var assignment is a global assignment,
unless the scope is limited by a function content.

The p2 was assigned to an element object by IE.

Some way or another revarring is necessary.

Examples:

<body>
<div id=q>world</div>
</body>
<script type='text/javascript'>
//var q;
//q = document.body;
alert(q.innerHTML); // returns world
</script>

==============================

<body>
<div id=q>world</div>
</body>
<script type='text/javascript'>
//var q;
q = document.body;
alert(q.innerHTML); // does not alert!
</script>

==============================

<body>
<div id=q>world</div>
</body>
<script type='text/javascript'>
var q;
q = document.body;
alert(q.innerHTML); // returns world
</script>

==============================

<body>
<div id=q>world</div>
</body>
<script type='text/javascript'>
//var q;
qq = document.body;
alert(qq.innerHTML); // returns the whole body content
</script>
 

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

Only one table shows up with the information 2
Need help again please 19
Help with code 0
Help with my responsive home page 2
getElementById and Firefox 4
JSON problem on Supervideo.tv remote upload app 4
executing javascript set with innerHTML in IE 7 6
firefox and problems with getElementById 5

Members online

Total: 25 (members: 4, guests: 21)
Robots: 313

Forum statistics

Threads
473,755
Messages
2,569,535
Members
45,007
Latest member
obedient dusk

Latest Threads

Top