why does document.getElementById(optionDivId) not find id of element that is clearly there

Discussion in 'Javascript' started by Jake Barnes, May 23, 2006.

  1. Jake Barnes

    Jake Barnes Guest

    Imagine I have these two lines of HTML:

    <p>Pick a list: (<a href="mcControlPanel.php"
    onClick="hideOrShowDivById('newMailList'); return false;">Create New
    List?</a>)</p>

    <form id="newMailList" method="post" action="mcControlPanel.php">


    Imagine I have this function:


    function hideOrShowDivById(optionDivId) {
    if (document.getElementById(optionDivId)) {
    var optionDiv = document.getElementById(optionDivId);
    if (optionDiv.style.display == 'block') {
    optionDiv.style.display='none';
    } else {
    optionDiv.style.display='block';
    }
    } else {
    alert("There was no item on the page called " + optionDivId);
    }
    }



    Why would I get the error message ""There was no item on the page
    called newMailList"
     
    Jake Barnes, May 23, 2006
    #1
    1. Advertising

  2. Jake Barnes wrote:
    > Imagine I have these two lines of HTML:
    >
    > <p>Pick a list: (<a href="mcControlPanel.php"
    > onClick="hideOrShowDivById('newMailList'); return false;">Create New
    > List?</a>)</p>
    >
    > <form id="newMailList" method="post" action="mcControlPanel.php">
    >
    >
    > Imagine I have this function:
    >
    >
    > function hideOrShowDivById(optionDivId)

    {
    > if (document.getElementById(optionDivId))

    {
    > var optionDiv = document.getElementById(optionDivId);
    > if (optionDiv.style.display == 'block')

    optionDiv.style.display='none';
    > else

    optionDiv.style.display='block';
    }
    else
    alert("There was no item on the page called " + optionDivId);
    > }
    >


    > Why would I get the error message ""There was no item on the page
    > called newMailList"


    Have you checked the integrity of your HTML?
    Ensure that all applicable elements have closing tags.
     
    Stephen Chalmers, May 23, 2006
    #2
    1. Advertising

  3. Jake Barnes

    RobG Guest

    Re: why does document.getElementById(optionDivId) not find id ofelement that is clearly there

    Jake Barnes wrote:
    > Imagine I have these two lines of HTML:
    >
    > <p>Pick a list: (<a href="mcControlPanel.php"
    > onClick="hideOrShowDivById('newMailList'); return false;">Create New
    > List?</a>)</p>
    >
    > <form id="newMailList" method="post" action="mcControlPanel.php">
    >
    > Imagine I have this function:
    >
    > function hideOrShowDivById(optionDivId) {
    > if (document.getElementById(optionDivId)) {
    > var optionDiv = document.getElementById(optionDivId);
    > if (optionDiv.style.display == 'block') {


    In this example, optionDiv is a reference to a form element. Most
    elements in the page inherit their display characteristics from a
    default stylesheet, they are not contained in the element's style object.

    This is easily fixed by modifying your script to:

    if (optionDiv.style.display == '') {
    optionDiv.style.display = 'none';
    } else {
    optionDiv.style.display = '';
    }


    or more concisely and with feature detection:

    var o = optionDiv.style;
    if (o){
    o.display = ('' == o.display)? 'none' : '';
    }

    Now it will work with a wide variety of element types, regardless of
    their default display attribute value.

    There are many different values for the display attribute, hence it is
    recommended to switch between '' and 'none' rather than some specific
    value like 'block' or 'inline'. Setting it to '' allows it to return to
    the default (or whatever it might have been set to by CSS).

    <URL:http://www.w3.org/TR/CSS21/visuren.html#propdef-display>

    [...]

    > Why would I get the error message ""There was no item on the page
    > called newMailList"


    Because the call to optionDiv.style.display returns an empty string
    (''), so the test:

    if (optionDiv.style.display == 'block')

    is always false.


    --
    Rob
    Group FAQ: <URL:http://www.jibbering.com/faq/>
     
    RobG, May 24, 2006
    #3
    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. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,130
    Smokey Grindel
    Dec 2, 2006
  2. wk
    Replies:
    5
    Views:
    192
    Dietmar Meier
    Apr 22, 2005
  3. Katie
    Replies:
    2
    Views:
    201
    Randy Webb
    Jul 20, 2006
  4. Replies:
    5
    Views:
    161
  5. Phil Powell
    Replies:
    8
    Views:
    404
    Doug Gunnoe
    Nov 26, 2008
Loading...

Share This Page