SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: .hasClass

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Astoria, NY
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .hasClass

    Hello,

    I am currently working on some code that changes html presentation by changing classes identified in my CSS document. I as hoping to use a Core.hasClass() function to ensure that things follow through properly and take additional steps if they are not.

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en-US">
    <head>
    <meta http-equiv="content-type" content="text/css" charset="utf-8" />
    <title>Pizza Party!</title>
    </head>
    <body>
    <div class="header">
    <h1>Pizza-Pazzaz!</h1>
    <p class="tagline">Welcome to the greatest Pizza Parlor in Mt. Kisco!</p>
    </div>
    <div id="list_1" class="ingredients">
    <p>While our Pizzas are exquisite without toppings, our customers often enjoyo a mixture of vegetarian and meat additions.</p>
    <h3>Vegetarian option</h3>
    	<ul>
    		<li>Bell Peppers</li>
    		<li>Banana Peppers</li>
    		<li>Spinach</li>
    		<li>Onions</li>
    		<li>Garlic</li>
    		<li>Olives</li>
    	</ul>
    <h3>Meats</h3>
    	<ul>
    		<li>Meatballs</li>
    		<li>Buffalo Chicken</li>
    		<li>Grilled Chicken</li>
    		<li>BBQ Chicken</li>
    		<li>Sausage</li>
    	</ul>
    </div>
    <div id="footer"">
    <p class="additional">hi</p>
    </div>
    <script type="text/javascript">
    Code:
    Core.hasClass = function(target, theClass) {
    var pattern = new RegExp("(^| )" + theClass + "( |$)");
    if (pattern.text(target.className) {
    return true;
    }
    return false;
    };
    var div2=document.getElementById("list_1");
    if (Core.hasClass(div2, "ingredients")) {
    alert("The second div element has the matching class");
    }
    HTML Code:
    </script>
    </body>
    </html>

    The Core.hasClass I took from Kevin Yank's Simply Javascript book. I'm not entirely sure why this code is not working, but my intention is to throw the Core.hasClass into an external file and reference it similar to the conditional code.

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this part is intended:

    Code:
    if (pattern.text(target.className) {
    Should be:

    Code:
    if (pattern.test(target.className) {
    I mistype this myself all the time along with 'data' and 'date'

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Astoria, NY
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Definitely was a typo, and I fixed it but this script is still failing. I don't believe searching by class is the best method, but regardless these are things that should work and I was hoping to make use of it.
    <script type="text/javascript">
    Core.hasClass=function(target, theClass) {
    var pattern=new RegExp("(^| )"+theClass+"( |$)");
    if (pattern.test(target.className) {
    return true;
    }
    return false;
    };
    var t=document.getElementById("list_1");
    if (Core.hasClass(t, "ingredients") {
    alert("success");
    }
    </script>

    Its weird because I've had no issue with .js with the exception of these Core scritps that Kevin Yank wrote in Simply Javascript. I've also checked the errata, but there is no error on .hasClass for first edition 2007.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BenjaminSV View Post
    The Core.hasClass I took from Kevin Yank's Simply Javascript book. I'm not entirely sure why this code is not working, but my intention is to throw the Core.hasClass into an external file and reference it similar to the conditional code.
    It's not working because the Core object doesn't exist.

    You can deal with that by first checking for and creating if need be a Core object, beforehand.

    Code javascript:
    window.Core = window.Core || {};
    Core.hasClass = function(target, theClass) {
        ...
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Astoria, NY
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothing seems to be working :X

    I created the Core object as you suggested and the program did not run.

    Then I tried using the code-archive for the book which, surprisingly, did not yield any fruit either.

    Finally I decided not to use an object and left it as a function

    <html>
    <head></head>
    <body>
    <div id="top" class="bottom">
    </div>
    <script type="text/javascript">
    function hasClass(target, theClass) {
    var pattern=new RegExp("(^| )"+theClass+"( |$)");
    if (pattern.test(target.className) {
    return true;
    }
    return false;
    };
    var test = document.getElementById("top");
    alert(test.nodeName);
    if (hasClass(test, "bottom") {
    alert("success");
    }
    </script>
    </body>
    </html>

    Not sure what to do

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Apply some appropriate indenting to your code and the problem should then become crystal clear.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Astoria, NY
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    =)

    Not embarrassing.

    function hasClass(target, theClass)
    {
    var pattern = new RegExp("(^| )" + theClass + "( |$)");
    if (pattern.test(target.className))
    {
    return true;
    }
    return false;
    };
    var test = document.getElementById("top");
    alert(test.nodeName);
    if (hasClass(test, "bottom"))
    {
    alert("success");
    }

    Thank you.


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
  •