This is Easy :)

Question

artvor 0 Light Poster

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

html-css javascript

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

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

Dani AI

Generated 9 Months Ago

Short summary: the original handler iterates every LI in the same UL and forces non-clicked items to become "off", so the static "bold" item gets flipped too. Repeating id="change" is invalid (IDs must be unique) and document.getElementById only ever returns one element — 's hint is technically correct for a single element, and 's idea of excluding items with class "bold" will work. A clearer, more robust approach is to mark only the list items that should be switchable with a class (for example selectable) and change only those elements.

A compact event-delegation solution (mark switchable LIs with class="selectable") — this keeps the "bold" LI untouched and avoids duplicate IDs:

document.addEventListener('DOMContentLoaded', function () {
  var nav = document.querySelector('.titleNav');
  if (!nav) return;

  nav.addEventListener('click', function (e) {
    var li = e.target.closest && e.target.closest('li');
    if (!li || !nav.contains(li) || !li.classList.contains('selectable')) return;

    Array.prototype.forEach.call(nav.querySelectorAll('li.selectable'), function (it) {
      it.classList.remove('on');
      it.classList.add('off');
    });

    li.classList.remove('off');
    li.classList.add('on');
  });
});

Troubleshooting notes: do not use the same id on multiple elements — use a class for groups. If links inside LIs trigger navigation, either use e.preventDefault() for the click or give the anchors a real URL and handle classes on the LI. For very old browsers, replace closest and NodeList.forEach with a small fallback loop. This approach keeps markup simple and avoids the need to wrap the static "Conditions" item in a separate UL, addressing the workaround posted while remaining cleaner and more maintainable.

All 19 Replies

hielo 65 Veteran Poster

15 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

15 Years Ago

try pasting it between lines 16 and 17

hielo 65 Veteran Poster

15 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 15 Years Ago by hielo because: n/a

hielo 65 Veteran Poster

15 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 15 Years Ago by hielo because: n/a

Taywin 312 Posting Virtuoso

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

15 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

15 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 425 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 425 WiFi Lounge Lizard Team Colleague · Answer 14 · 2010-09-30T01:31:15+00:00

Another thing ....

Incorrect : Awords
Correct : Awards

Airshow

This is Easy :)

Dani AI

Recommended Answers Collapse Answers

All 19 Replies

Recommended Answers