This is Easy :)

Question

artvor 0 Light Poster

14 Years Ago

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!

javascript

Edited 14 Years Ago by Ezzaral because: Added code tags. Please use them to format any code that you post.

4 Contributors
19 Replies
372 Views
15 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

hielo 65 Veteran Poster

14 Years Ago

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

hielo 65 Veteran Poster

14 Years Ago

try pasting it between lines 16 and 17

hielo 65 Veteran Poster

14 Years Ago

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='';
    }
}

Edited 14 Years Ago by hielo because: n/a

hielo 65 Veteran Poster

14 Years Ago

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.

Edited 14 Years Ago by hielo because: n/a

Taywin 312 Posting Virtuoso

14 Years Ago

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.

Edited 14 Years Ago by Taywin because: n/a

Reply to this topic

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.

artvor 0 Light Poster · Answer 1 · 2010-09-29T19:59:48+00:00

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

artvor 0 Light Poster · Answer 2 · 2010-09-29T20:01:54+00:00

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>

artvor 0 Light Poster · Answer 3 · 2010-09-29T20:02:18+00:00

artvor 0 Light Poster

14 Years Ago

Sorry i'm so newby in JS

artvor 0 Light Poster · Answer 4 · 2010-09-29T20:07:29+00:00

artvor 0 Light Poster

14 Years Ago

Are you still here..?

artvor 0 Light Poster · Answer 5 · 2010-09-29T20:10:54+00:00

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!

artvor 0 Light Poster · Answer 6 · 2010-09-29T20:13:13+00:00

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

artvor 0 Light Poster · Answer 7 · 2010-09-29T20:14:21+00:00

Thanks for helping
Here is the website : http://brokerhabitat.com/ava_fx/
See: Conditions: Deposit , withdrawal.. (That is where i'm working)

artvor 0 Light Poster · Answer 8 · 2010-09-29T20:25:16+00:00

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

artvor 0 Light Poster · Answer 9 · 2010-09-29T20:34:06+00:00

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)

artvor 0 Light Poster · Answer 10 · 2010-09-29T20:35:58+00:00

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>

artvor 0 Light Poster · Answer 11 · 2010-09-29T20:39:27+00:00

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?

artvor 0 Light Poster · Answer 12 · 2010-09-29T20:56:48+00:00

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

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 13 · 2010-09-30T01:20:49+00:00

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

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 14 · 2010-09-30T01:31:15+00:00

Another thing ....

Incorrect : Awords
Correct : Awards

Airshow