Simpe help urgent!

Hello Web Developers!

I need a simple help out here:

This is my JS code:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function CngClass(){
 var zxcevt=window.event||arguments.callee.caller.arguments[0];
 var zxcobj=window.event?zxcevt.srcElement:zxcevt.target;
 while (zxcobj.parentNode){
  if (zxcobj.nodeName=='LI') break;
  zxcobj=zxcobj.parentNode;
 }
 if (zxcobj.nodeName!='LI') return;
 var zxcul=zxcobj.parentNode;
 var lis=zxcul.getElementsByTagName('LI');
 for (var z0=0;z0<lis.length;z0++){
  lis[z0].className=lis[z0]!=zxcobj?'off':'on';
 }
}



/*]]>*/
</script>

This is my HTML code:

<ul class="titleNav" onclick="CngClass();">

<li class="bold">Conditions</li>
<li class="on" >Deposit Modes</li>
<li class="off" >Withdrawal Modes</li>
<li class="off">Accounts</li>
<li class="off">Regulation</li>
</ul>

This script is to change class on click.

MY QUESTION: How can I change class only <li> that have this ID=change
(I don't know how to edit JS script, I'm not so expert)

Like:
<li class="bold">Conditions</li> <this on don't change
<li class="on" id="change" >Deposit Modes</li> and this one Yes.

If some one have skills to resolve this little problem please post it here.
Thanks for help!

3

Contributors

3

Replies

9 Hours

Discussion Span

2 Years Ago

Last Updated

4

Views

artvor

Light Poster

29 posts since Jul 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

1

Supposedly, each of your LI tags has a unique ID (and it should otherwise you shouldn't call it ID), you can access the element directly using getElementById(ID).

//HTML part
...
<li class="on" id="change1">blah</li>
<li class="on" id="change2">blah</li>
...

//JavaScript when call example
<input type="button" value="change class 1" onclick="chgClass('change1')">
<input type="button" value="change class 2" onclick="chgClass('change2')">

//JavaScript function
function chgClass(ID) {
  var el = document.getElementById(ID)
  if (el) {  // make sure that the element with the ID exists
    el.className = "off"  // or whatever you want to assign to the element
  }
}

If the ID is not unique, I can't remember what would happen here. I believe that it would return the first found element with the ID which may not be the one you are looking for.

Taywin

Posting Maven

2,633 posts since Apr 2010

Reputation Points: 275

Solved Threads: 375

Skill Endorsements: 17

2 Years Ago

0

Sorry did not understand your code.

I need to change this code here:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
 
function CngClass(){
 var zxcevt=window.event||arguments.callee.caller.arguments[0];
 var zxcobj=window.event?zxcevt.srcElement:zxcevt.target;
 while (zxcobj.parentNode){
  if (zxcobj.nodeName=='LI') break;
  zxcobj=zxcobj.parentNode;
 }
 if (zxcobj.nodeName!='LI') return;
 var zxcul=zxcobj.parentNode;
 var lis=zxcul.getElementsByTagName('LI');
 for (var z0=0;z0<lis.length;z0++){
  lis[z0].className=lis[z0]!=zxcobj?'off':'on';
 }
}
 
 
 
/*]]>*/
</script>

it's must be like this:

<li class="bold">Conditions</li> // This don't change
<li class="on" id="change" >Deposit Modes</li> // This change
<li class="off" id="change" >Withdrawal Modes</li> // This change
<li class="off" id="change">Accounts</li> // This change
<li class="off" id="change">Regulation</li> // This change
</ul>

So when i click on <li> it have to become class="on" and when i click on other <li> the last <li> become class="off" and new <li> become class="on" ( But fine this works great)
The only problem that i have that: <li class="bold">Conditions</li> becoume also class="off" when i click on others <li>

So i was thinking to put ID on <li> so only that with id will change.

Owh.. gush .. i hope i explained my self :)

Thanks to all who try to help me!

artvor

Light Poster

29 posts since Jul 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

Artvor,

It's much simpler to attach onclick handlers to the <LI> elements than the <UL> element. This way, you avoid cross-browser issues with deternining xcevt and zxcobj . All that part of the code disappears.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
/* sample styles for testing */
.off { color:red; }
.on { color:green; }
.bold { font-weight:bold; }
</style>

<script type="text/javascript">
onload = function() {
	var clickableLists = ['myList1', 'myList2'];//Here, put the ids of all relevant <ul> or <ol> elements in an array.
	for(var i=0; i<clickableLists.length; i++) {//Loop through all the lists
		var list = document.getElementById(clickableLists[i]);//Find the DOM elements for clickableLists[i].
		if(!list) { return; }//safety
		var changeClass_closure = function(items) {//Here we define a function that forms a closure to remember items for each list in turn.
			return function() {//This function does the work when user clicks a list item
				for(var i=0; i<items.length; i++) {
					if( !items[i].getAttribute('protect') || items[i].getAttribute('protect')==='false' ) {
						items[i].className = (items[i] !== this) ? 'off' : 'on';
					}
				}
			};
		};
		var items = list.getElementsByTagName('li');
		for(var j=0; j<items.length; j++) {//now we attach a handler to all li elements in each list.
			items[j].onclick = changeClass_closure(items);
		}
	}
};
</script>
</head>

<body>

<ul id="myList1" class="titleNav">
	<li class="bold" protect="true">Conditions 1</li><!-- custom attribute protect -->
	<li class="on">Deposit Modes 1</li>
	<li class="off" >Withdrawal Modes 1</li>
	<li class="off">Accounts 1</li>
	<li class="off">Regulation 1</li>
</ul>

<ul id="myList2" class="titleNav">
	<li class="bold" protect="true">Conditions 2</li><!-- custom attribute protect -->
	<li class="on">Deposit Modes 2</li>
	<li class="off" >Withdrawal Modes 2</li>
	<li class="off">Accounts 2</li>
	<li class="off">Regulation 2</li>
</ul>

</body>
</html>

NOTES:

We formulate everything inside a window.onload handler, which runs automatically when the page has loaded.
I have reversed the logic such that you designate the list item(s) you want to protect rather than the ones you want to allow to change. Items are protected with a custom HTML attribute protect="true" .
The code is reusable. If necessary, it can be applied to more than one list.
We make use of a closure - a special feature of Javascript - to avoid having to recalculate items each time the user clicks a list.
See comments in code for further details.

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,782 posts since Apr 2009

Reputation Points: 370

Solved Threads: 388

Skill Endorsements: 9

Simpe help urgent!

This article has been dead for over three months: Start a new discussion instead