Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
Like Tree1Likes
  • 1 Post By Ronald Roe

Thread: getElementsByClass and Display='none' generating an error. I'm so confused.

  1. #1
    Junior Member
    Join Date
    May 2016
    Posts
    9
    Member #
    54197

    getElementsByClass and Display='none' generating an error. I'm so confused.

    Hi again, all. I'm a total noob at javascript. I've been trying a really simple little script to make text and a corresponding button change when clicked.
    I've manage to get it to work when I set them all to using ID, but when I try to label the paragraphs as a CLASS, it doesn't work. Thanks in advance.

    Here's the code:

    The HTML file-
    HTML Code:
    <input id="aButton" type="button" value="SEE A" style = "display:block" onclick="showA()" />
    <input id="bButton" type="button" value="SEE B" style = "display:none" onclick="showB()" />
    
    <p class="a" style = "display:none">
    	This is A.
    </p>
    <p class="b" style = "display:block">
    	This is B.
    </p>
    
    <script src="replaceElement.js"></script>
    The Javascript file-
    Code:
    function showA(){
    	document.getElementById('aButton').style.display='none';
    	document.getElementById('bButton').style.display='block';
    	document.getElementsByClass("b").style.display="none";
            document.getElementsByClass('a').style.display='block';
    }
    
    function showB(){
    	document.getElementById('bButton').style.display='none';
    	document.getElementById('aButton').style.display='block';
    	document.getElementsByClass('a').style.display='none';
            document.getElementsByClass('b').style.display='block';
    }

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    It's .getElementByClassName()

    I much prefer querySelector(), myself.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    There are a few problems:

    • It's getElementsByClassName, not getElementsByClass
    • getElementsByClassName returns a set of results, so you have to iterate through them
    • getElementsByClassName doesn't work at all on some older browsers like IE8, so it's somewhat unreliable

    If you don't mind using jQuery (you can load it from Google and it will likely already be in your visitor's browser cache so it's not likely to slow the page loading), it actually makes this sort of thing much simpler, see here:

    https://jsfiddle.net/Lnh63foj/
    Kevin Henney
    CRUCIAL CREATIVE
    Web Development - Graphic Design - Branding

  5. #4
    Junior Member
    Join Date
    May 2016
    Posts
    9
    Member #
    54197
    Thanks Ronald. You always respond so fast. I really appreciate it.
    I totally missed that "Name" part. Darn! I'll take a look at querySelector().

    khenny, I guess getElementsByClassName is a little more complicated than I thought.
    That jQuery thing was perfect though. Thanks!

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by khenney View Post
    ...If you don't mind using jQuery (you can load it from Google and it will likely already be in your visitor's browser cache so it's not likely to slow the page loading), it actually makes this sort of thing much simpler, see here:

    https://jsfiddle.net/Lnh63foj/
    If you're trying to learn JS, I recommend holding off on jQuery. That isn't to say don't use it, just wait until you're familiar with JS as a language before you do. jQuery is a little *too* easy and will obscure some very necessary building blocks for learning JS. It's a great tool, just learn to use the hand tools before you move to the power tools.
    coffeebot3000 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Junior Member
    Join Date
    May 2016
    Posts
    9
    Member #
    54197
    If you're trying to learn JS, I recommend holding off on jQuery.
    Very true. Will keep that in mind. Thanks.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:48 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com