Member Avatar for artvor

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
  • 312 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Taywin

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.

Edited by Taywin because: n/a
Member Avatar for artvor

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:

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

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

Member Avatar for Airshow

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

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.