SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript isnt recognizing classes

    Im trying various ways to trigger a transition, the simplest being the use of css pseudoclasses:
    Code:
    //leaving out default header stuff//
    <head>
    <style>
    .item{
    opacity:1;
    -moz-transition: opacity 1s ease;
    }
    .item:hover {
    opacity:0;
    }
    </style>
    </head>
    <body>
    <img src="myimage.jpg" class="item" />
    </body>
    If i use js to make it trigger onclick instead of hover it works fine:

    Code:
    //leaving out default header stuff//
    <head>
    <style>
    #item{
    opacity:1;
    -moz-transition: opacity 1s ease;
    }
    </style>
    <script type="text/javascript">
    function transition() {
                document.getElementById('item').style.opacity="0";
    }
    </script>
    </head>
    <body>
    <img src="myimage.jpg" id="item" onclick="transition()" />
    </body>
    But if i replace the id's with classes, it no longer works:
    Code:
    //leaving out default header stuff//
    <head>
    <style>
    .item{
    opacity:1;
    -moz-transition: opacity 1s ease;
    }
    </style>
    <script type="text/javascript">
    function transition() {
                document.getElementsByClassName('item').style.opacity="0";
    }
    </script>
    </head>
    <body>
    <img src="myimage.jpg" class="item" onclick="transition()" />
    </body>
    What am i doing wrong?

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.getElementsByClassName returns a collection through which you must iterate, applying the value to each element.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to note: document.getElementsByClassName() is not supported in IE8 or below.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by domscripter View Post
    Just to note: document.getElementsByClassName() is not supported in IE8 or below.
    So to get it to work in those browsers you need to test if getElementsByClassName exists and if not then include your own code to implement that functionality (by processing through all the tags and checking if the className attribute contains the specified class.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •