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>

[ShadowMage]

It's adding a class to the class list. Say you have a div with a class already defined:

<div class='someClass'>some content in here</div>

When you use clicker.className += " "+ccn you are adding the value of the variable ccn to the class list. In this case ccn holds the string 'clicker' so now the class list for your div would look like this:

<div class='someClass clicker'>some content in here</div>

If there is no class defined on the element it will still take the class 'clicker' because white-space doesn't matter in the class attribute. You could write:

<div class='  clicker	 '>some content in here</div>

And the browser will still interpret it as:

<div class='clicker'>some content in here</div>

If you were to just use clicker.className = ccn you would overwrite already existing classes that may be defined on that element. So with the example above, this:

<div class='someClass'>some content in here</div>

would become:

<div class='picker'>some content in here</div>

[tinfanide]

It's adding a class to the class list. Say you have a div with a class already defined:

<div class='someClass'>some content in here</div>

When you use clicker.className += " "+ccn you are adding the value of the variable ccn to the class list. In this case ccn holds the string 'clicker' so now the class list for your div would look like this:

<div class='someClass clicker'>some content in here</div>

If there is no class defined on the element it will still take the class 'clicker' because white-space doesn't matter in the class attribute. You could write:

<div class='  clicker	 '>some content in here</div>

And the browser will still interpret it as:

<div class='clicker'>some content in here</div>

If you were to just use clicker.className = ccn you would overwrite already existing classes that may be defined on that element. So with the example above, this:

<div class='someClass'>some content in here</div>

would become:

<div class='picker'>some content in here</div>

Very clear explanation. Sorry for the 10 mins wasted...I didn't realise I'd produced two identical posts until I read ya post.

[ShadowMage]

Very clear explanation. Sorry for the 10 mins wasted...I didn't realise I'd produced two identical posts until I read ya post.

No worries. Duplicate posts happen all the time. I just need to pay more attention that's all.