SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    not assigning a class

    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 Code:
    <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:
    Code:
    	$(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:
    Code:
    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    The class is not assigned, because within hideCode:

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

    Code:
    Uncaught ReferenceError: attack is not defined index.html:108
    which will also be causing things to fail.

    HTH

  3. #3
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh right! i forgot i changed that one. Thx for helping out.


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
  •