.hasClass

JavaScript
1

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 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">

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");
}

</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

Not sure if this part is intended:


if (pattern.text(target.className) {

Should be:


if (pattern.test(target.className) {

I mistype this myself all the time along with ‘data’ and ‘date’

3

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.[B]test/B {
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. :frowning:

4

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.


window.Core = window.Core || {};
Core.hasClass = function(target, theClass) {
    ...
};
5

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 :frowning:

6

Apply some appropriate indenting to your code and the problem should then become crystal clear.

7

=)

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.