className & +=

[tinfanide]

I wanna ask why

clicker.className+=" "+ccn;

instead of

clicker.className = ccn;

What does it mean by

clicker.className = clicker.className + " " + ccn;

Why should it be like this?

<script>function toggleNext(el) 	{	 var next = el.nextSibling;	 while(next.nodeType != 1)	 next = next.nextSibling;	 next.style.display = (next.style.display=="none") ? "block" : "none";	}	function toggleNextById(el) {	 var ccn = "clicker";	 var clicker = document.getElementById(el);	 clicker.className+=" "+ccn;	 clicker.onclick = function() {toggleNext(this)}	 toggleNext(clicker);	}window.onload=function() {toggleNextById('salutation')}</script>

.clicker {cursor:pointer;color:blue;}

<p id="salutation">hi</p><p>there</p>

The code is from JS toggle

[Drycodez]

Instead of writing this:

clicker.classname=clicker.classname + " " + ccn;

you can simply minimize the code to:

clicker.classname+=" "+ ccn;

what it means is that you want clicker.classname to be assigned the value 'clicker.classname' (itself) and " space " followed by the next value.

[tinfanide]

Instead of writing this:

clicker.classname=clicker.classname + " " + ccn;

you can simply minimize the code to:

clicker.classname+=" "+ ccn;

what it means is that you want clicker.classname to be assigned the value 'clicker.classname' (itself) and " space " followed by the next value.

But what is the difference between

clicker.className+=" "+ccn;

clicker.className = ccn;

I've tested them and they seem to produce the same effect (add the class "clicker" to the JS object clicker)And why does the coder need to add a space? What do you mean by "" space " followed by the next value"?

[Drycodez]

The deference is:

clicker.classname=ccn

was only assigned one value (ccn) and

clicker.classname+=ccn

was assign two value (itself and ccn).

[Drycodez]

For you to understand how it works, try this:

 var name="TI"; document.write(name)//prints:TIname+="N";document.write(name)//prints: TIN

[JamesB]

also, a space is needed to separate the class names when you want to use more than 1, eg in html:

<div id="a" class="class1 class2 aThirdClass"></div>

if you wanted to add a 4th class name to that in js, this code would be wrong:

document.getElementById("a").className += "class4";

because the class attribute would end up looking like this:

class="class1 class2 aThirdClassclass4"

and thus the space is needed on the front of the new class name string if the element already has at least 1 class set.

[tinfanide]

also, a space is needed to separate the class names when you want to use more than 1, eg in html:

<div id="a" class="class1 class2 aThirdClass"></div>

if you wanted to add a 4th class name to that in js, this code would be wrong:

document.getElementById("a").className += "class4";

because the class attribute would end up looking like this:

class="class1 class2 aThirdClassclass4"

and thus the space is needed on the front of the new class name string if the element already has at least 1 class set.

That's exactly what I was confused about.Now I see why a space is needed. The coder might wanna make the line always ready for addition of any css classes.Thanks for all of your examples.

[ShadowMage]

Shucks. I didn't realize this was a duplicate post, and so I just wasted 10 minutes writing up a response in the other one........