problem with getElementById under IE 7

Discussion in 'Javascript' started by Pawel_Iks, Feb 14, 2008.

  1. Pawel_Iks

    Pawel_Iks Guest

    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>
     
    Pawel_Iks, Feb 14, 2008
    #1
    1. Advertising

  2. Pawel_Iks

    David Mark Guest

    On Feb 14, 3:41 am, Pawel_Iks <> wrote:
    > 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?


    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"];


    Points are for printing.

    > var indx=5;
    >
    > function increaseSize()
    > {


    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.
     
    David Mark, Feb 14, 2008
    #2
    1. Advertising

  3. Pawel_Iks

    Evertjan. Guest

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


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

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Feb 14, 2008
    #3
  4. Pawel_Iks

    Pawel_Iks Guest

    On 14 Lut, 11:47, "Evertjan." <> wrote:
    > 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');

    >
    > use:
    >
    > var p2 = document.getElementById('p2');


    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?
     
    Pawel_Iks, Feb 14, 2008
    #4
  5. Pawel_Iks

    Pawel_Iks Guest

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


    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).
     
    Pawel_Iks, Feb 14, 2008
    #5
  6. Pawel_Iks

    Evertjan. Guest

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

    > On 14 Lut, 11:47, "Evertjan." <> wrote:
    >> 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');

    >>
    >> use:
    >>
    >> var p2 = document.getElementById('p2');

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


    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>

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Feb 14, 2008
    #6
  7. On Thu, 14 Feb 2008 03:03:37 -0800, Pawel_Iks wrote:

    > On 14 Lut, 11:47, "Evertjan." <> wrote:
    >> Pawel_Iks wrote on 14 feb 2008 in comp.lang.javascript:
    >> > function increaseSize()
    >> > {
    >> > p2=document.getElementById('p2');

    >>
    >> use:
    >>
    >> var p2 = document.getElementById('p2');

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


    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.
     
    Jeremy J Starcher, Feb 14, 2008
    #7
  8. Pawel_Iks

    Evertjan. Guest

    Jeremy J Starcher wrote on 14 feb 2008 in comp.lang.javascript:

    > On Thu, 14 Feb 2008 03:03:37 -0800, Pawel_Iks wrote:
    >
    >> On 14 Lut, 11:47, "Evertjan." <> wrote:
    >>> Pawel_Iks wrote on 14 feb 2008 in comp.lang.javascript:
    >>> > function increaseSize()
    >>> > {
    >>> > p2=document.getElementById('p2');
    >>>
    >>> use:
    >>>
    >>> var p2 = document.getElementById('p2');

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

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


    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>








    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Feb 14, 2008
    #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. Skeets
    Replies:
    4
    Views:
    6,039
    Skeets
    Feb 23, 2006
  2. Richard
    Replies:
    4
    Views:
    184
    Richard
    Jan 25, 2007
  3. TR
    Replies:
    5
    Views:
    132
    Richard Cornford
    May 19, 2004
  4. JKD

    getElementById problem

    JKD, Dec 1, 2004, in forum: Javascript
    Replies:
    3
    Views:
    103
  5. Michael Winter

    getelementbyid problem

    Michael Winter, Apr 16, 2005, in forum: Javascript
    Replies:
    1
    Views:
    112
    Warren Thai
    Apr 17, 2005
Loading...

Share This Page