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!

Recommended Answers

All 19 Replies

all you need is:

var LI = document.getElementById('change');
if( LI )
{ //you located an element with id='change'
  LI.className='someOtherClassNameHere';
}
else
{
//no element contains id="change"
}

Please stay here... i gonna check it.. :)))
Just a second..
Thanks..

How do i incorporate your code into all ready existing?

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

Sorry i'm so newby in JS

Are you still here..?

try pasting it between lines 16 and 17

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!

I tryed but it still change all of <li> classes (also class="bold" that that must stay blod

try:

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';
        if( lis[z0].className=='on')
          lis[z0].id='change';
        else
          lis[z0].id='';
    }
}

I just need To edit this on JS
var lis=zxcul.getElementsByTagName('LI'); + ByID
Don't know how to do it

var lis=zxcul.getElementsByTagName('LI')[b];[/b] + ByID the PLUS symbol is meant to "join" the "stuff" on the left with the "stuff" on the right, so get RID of the semicolon to the left of the PLUS symbol.

Nope: the <li class="blod"> become class="off" again..
See here: http://brokerhabitat.com/ava_fx/ (conditions is Class="bold" that don't have to change)

Have some others ideas?

(Thanks for helping me)

This is what i have:

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

<li class="bold">Conditions</li>
<li class="on" id="change" ><a id="myHeader1" href="javascript:showonlyone('newboxes1');" >Deposit Modes</a></li>
<li class="off" id="change" ><a id="myHeader2" href="javascript:showonlyone('newboxes2');" >Withdrawal Modes</a></li>
<li class="off" id="change" ><a id="myHeader2" href="javascript:showonlyone('newboxes3');" >Accounts</a></li>
<li class="off" id="change" ><a id="myHeader2" href="javascript:showonlyone('newboxes4');" >Regulation</a></li>
</ul>
<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';
        if( lis[z0].className=='on')
          lis[z0].id='change';
        else
          lis[z0].id='';
    }
}


/*]]>*/
</script>

var lis=zxcul.getElementsByTagName('LI'); + ByID
the PLUS symbol is meant to "join" the "stuff" on the left with the "stuff" on the right, so get RID of the semicolon to the left of the PLUS symbol.

Nope...nope... I did not explane my self... well..

Just gop here: http://brokerhabitat.com/ava_fx/

See the condition menu.. try to navigate.. you see that condition become class="off" but I don't neet it to change.
So I was thinking to change only <li> with ID="chage" ..

Omg.. so simple and so complicated..
Some one some ideas?

OMG! I made IT!!!!!!!!!!!!!!!!!!!!!!
After 6 Fk hours... for sucj simple thing.. can't believe..

I just aded <div> tag! to the bold class .. OMG!!

<div style="width:90px;"> <ul class="titleNav">
<li class="bold">Conditions</li></ul></div>
<div>
<ul class="titleNav" onclick="CngClass();">
<li class="on"  ><a id="myHeader1" href="javascript:showonlyone('newboxes1');" >Deposit Methods</a></li>
<li class="off"  ><a id="myHeader2" href="javascript:showonlyone('newboxes2');" >Withdrawal Methods</a></li>
<li class="off"  ><a id="myHeader2" href="javascript:showonlyone('newboxes3');" >Accounts</a></li>
<li class="off"  ><a id="myHeader2" href="javascript:showonlyone('newboxes4');" >Regulation</a></li>
</ul>
</div>
</div>

I hope it help some one...

The problem is the code line below with your original script.

lis[z0].className=lis[z0]!=zxcobj?'off':'on';

You may need to change to...

lis[z0].className=(lis[z0]!=zxcobj && lis[z0].className!="bold")?'off':'on';

Hmm... 2nd page... Didn't see that... Sorry.

Artvor,

You DOUBLE POSTED this problem!!!!!!!

I just spent time providing you with a solution in the other topic then found this one already well underway.

You are in good hands with Hielo but please don't double post.

Airshow

Another thing ....

Incorrect : Awords
Correct : Awards

Airshow

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.