Not assigning a class

JavaScript
1

Hey

I can’t find what’s wrong with the code. But it looks like it doesn’t assign the ‘has_staff’ class as all the div colours after clicking on them appear red.
It’s taken from Head First jQuery book I just altered the code a little for my version.

<html>
	<head>
		<title>Wizards</title>
		<link href="styles/style2.css" rel="stylesheet">
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	</head>
	<body>
	<div id="header">
		<h2>The Epic Wizards' Battle</h2>
	</div>
	<div id="main">
		<div class="guess_box"><img src="images/wizard1.jpg"/></div>
		<div class="guess_box"><img src="images/wizard2.jpg"/></div>
		<div class="guess_box"><img src="images/wizard3.jpg"/></div>
		<div class="guess_box"><img src="images/wizard4.jpg"/></div>
		<span id="result"></span>
	</div>

<script src="scripts/scriptsForWizards.js"></script>
	</body>
</html>

jQuery:

	$(document).ready(function() {

		$(".guess_box").click( checkForStaff );
	function getRandom(num){
		var number1 = Math.floor((Math.random()*num) + 20);
		return number1;
	}
	
	var hideCode = function() {
		var numRand = getRandom(4);
		$(".guess_box").each(function(index, value) {
			if (numRand == index) {
				$(this).append("<span id='has_staff'></span>");
				return false;
			}
		});
	}
	
hideCode();

	function checkForStaff() {
		var attack;
		if($.contains(this, document.getElementById("has_staff") ) )
		{
			var damage = getRandom(80);
			var spells = Array("Fireball", "Thunder Bolt", "Magic Missile", "Ray of Frost");
			var spell = spells[Math.floor(Math.random()*spells.length)];

			attack = "<p>I'm casting "+ spell +"</p>" + "<p>Damage: " + damage + "</p>";

		}
		else {
			attack = "<p>Sorry, you failed to find the staff!</p>" ;
		}
		$(this).append(attack);
		
		$(".guess_box").each( function() {
			if($.contains(this, document.getElementById("has_staff")))
			{
			$(this).addClass("staff");
			}else{
			$(this).addClass("no_staff");
			}
			$(this).unbind();
		});
	}

	$(".guess_box").hover(
	function () {
		// this is the mouseenter event handler
		$(this).addClass("my_hover");
	},
	function () {
		// this is the mouseleave event handler
		$(this).removeClass("my_hover");
	});
	$("#result").append(attack);
}); //End document.ready()

CSS:


div{
	float:left;
	height:245px;
	text-align:left;
	border: solid #000 3px;
}
#header{
	width:100%;
	border:0px;
	height:50px;
}
#main{
	background-color:grey;
	height: 500px;
}
.guess_box {
	height:264px;
}
.my_hover{
border: solid #00f 3px;
}

.staff {
border: solid #0f0 3px;
}
.no_staff {
border: solid #f00 3px;
}

Thx for help

2

Hi,

The class is not assigned, because within hideCode:

function getRandom(num){
  var number1 = Math.floor((Math.random()*num) + 20);
  return number1;
}

var hideCode = function() {
  var numRand = getRandom(4);
  $(".guess_box").each(function(index, value) {
    if (numRand == index) {
      $(this).append("<span id='has_staff'></span>");
      return false;
    }
  });
}

the variable numRand is always going to be over 20 and index is going to be 0, 1, 2, 3 respectively.

Also, if you look at the browser console, you will see the message:

Uncaught ReferenceError: attack is not defined index.html:108

which will also be causing things to fail.

HTH

3

oh right! i forgot i changed that one. Thx for helping out. :slight_smile: