Simple HideExpand with Javascript

I have created a simple expand/hide test script:

<html>
<head>
<script type="type/javascript"><!--
function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
        document.getElementById(elementid).style.display = '';
    } else {
        document.getElementById(elementid).style.display = 'none';
    }
}
//-->
</script>
</head>
<body>

<div><a href="javascript:showHide('div_1035677');">more...</a></div>

<div id="div_1035677" style="display:none">
HIDDEN CONTENT
</div>
</body>
</html>

I get an error message that I can't make any sense of (Object expected on line one). I don't see any errors in the above code. :-(

I have created a simple expand/hide test script:

<html>
<head>
<script type="type/javascript"><!--
function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
        document.getElementById(elementid).style.display = '';
    } else {
        document.getElementById(elementid).style.display = 'none';
    }
}
//-->
</script>
</head>
<body>

<div><a href="javascript:showHide('div_1035677');">more...</a></div>

<div id="div_1035677" style="display:none">
HIDDEN CONTENT
</div>
</body>
</html>

I get an error message that I can't make any sense of (Object expected on line one). I don't see any errors in the above code. :-(

Share Improve this question asked Jan 1, 2011 at 16:00 user478419 4132 gold badges6 silver badges20 bronze badges

Must be something else, you code works for me: jsfiddle.net/fkling/WYPz3 – Felix Kling Commented Jan 1, 2011 at 16:03

Add a comment |

5 Answers 5

Sorted by: Reset to default 11

type="type/javascript" should be type="text/javascript".

Change type/javascript to text/javascript

Full example:

<html>
<head>
  <script type="text/javascript" charset="utf-8">
  function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
      document.getElementById(elementid).style.display = '';
    } else {
      document.getElementById(elementid).style.display = 'none';
    }
  }
  </script>
</head>
<body>
  <div><a href="javascript:showHide('div_1035677');">more...</a></div>
  <div id="div_1035677" style="display:none">
    HIDDEN CONTENT
  </div>
</body>
</html>

Your mime type for script tag is wrong, it should be text/javascript not type/javascript.

Browsers will ignore script contents with unknown mime types.

In reality the type attribute is not required. But if you are adding it it should be text/javascript as it is the only value recognized by all the 3 major browsers. As as the standard goes the correct mime type for javascript is application/javascript but is not recognized by IE.

<script type="text/javascript">
    function showHide(elementid){
        if (document.getElementById(elementid).style.display == 'none'){
            document.getElementById(elementid).style.display = '';
        } else {
            document.getElementById(elementid).style.display = 'none';
        }
    }
</script>

For further reading
Should I include type="text/javascript" in my SCRIPT tags?

Yes, as the others have said above, you should use text/javascript, not type/javascript. In addition, using CDATA blocks will prevent an HTML/XML validator (such as the W3C HTML validator) from marking JavaScript as incorrect.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript">
        //<![CDATA[
        function showHide(elementid){
            if (document.getElementById(elementid).style.display == 'none'){
                document.getElementById(elementid).style.display = '';
            } else {
                document.getElementById(elementid).style.display = 'none';
            }
        }
        //]]>
        </script>
    </head>

    <body>
        <div><a href="javascript:showHide('div_1035677');">more...</a></div>
        <div id="div_1035677" style="display:none;">
        HIDDEN CONTENT
        </div>
    </body>
</html>

If you've set the type to text/javascript and it is still not working, it's probably because the element is not loaded in the DOM. There are two ways to solve the problem:

Move the Javascript code under the div like this:

<div id="div_1035677" style="display:none">
  HIDDEN CONTENT
</div>
<script type="text/javascript">

Wrap the code in an onload event handler:

function showHide(){
  if (this.style.display == 'none'){
    this.style.display = '';
  } else {
    this.style.display = 'none';
  }
}


window.onload = function(){
  document.getElementById('link').onclick = showHide;
};

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Simple HideExpand with Javascript - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)