Passing value error

**Deadweight** · 12-26-2013, 09:19 AM

I do not know why the value is always passing zero but I think it has something to do with the ready function that I'm using in Jquery.

Code:

$(function(){
change(0);
});

$(document).on('click','#nav>li',function(){
change(1);
});

function change(value){
$('#nav>li').removeClass('selected').addClass('not');
$('#nav>li:eq('+value+')').removeClass('not').addClass('selected');
}

That's fails to change the class. It does switch it the first time the page loads. After that it fails to do that.

**jscheuer1** · 12-26-2013, 09:49 AM

There could also be other problems. But the code is missing closing ' marks (added in red below - two places):

Code:

function change(value){
$('#nav>li').removeClass('selected').addClass('not');
$('#nav>li:eq('+value+')').removeClass('not').addClass('selected');
}

**Deadweight** · 12-26-2013, 11:08 AM

Oh sorry, that's not the error. I was typing it from my phone and just forgot to place them on the retype. they actually have the " ' ". Thanks tho

**jscheuer1** · 12-26-2013, 03:08 PM

Works fine here in Chrome:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.selected {
	color: red;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
change(0);
});

$(document).on('click','#nav>li',function(){
change(1);
});

function change(value){
$('#nav>li').removeClass('selected').addClass('not');
$('#nav>li:eq('+value+')').removeClass('not').addClass('selected');
}
</script>
</head>
<body>
<ul id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>

What browser are you using?

**Deadweight** · 12-26-2013, 06:33 PM

I'm using Chrome and here is a live example:
http://thebcelements.com/dhtml_test/kennel/

**jscheuer1** · 12-26-2013, 06:58 PM

Change bce.js to:

Code:

$(function() {
	selection = 0;
	setInterval(get_width,100);
	changeit(0);
});

$(document).on('click','#nav>li',function (){
	//selection = $(this).index();
	//$('.selected').switchClass('selected','not',100);	
	//$(this).switchClass('not','selected',100);
	changeit(1);
});

function get_width(){
	var change = $('body').width()-$('#nav').outerWidth(true)-10;
	$('#outline>li:eq(1)').width(change);
};

function changeit(value){
	$('#nav>li').removeClass('selected').addClass('not');
	$('#nav>li:eq('+value+')').removeClass('not').addClass('selected');
	$('#developer').text(value);
};

In get_width() there was an undeclared global var change which was overwriting the function change after it was used the first time (100ms after document ready). By declaring the change var formally in the function and changing the function change()'s name to changeit, the conflict is avoided. Either of these actions alone should suffice to fix the problem. But I did both, just to be on the safe side.

Further, the change (now changeit) function had an error - the_value - was undefined. I changed that to value to avoid that error.