Click effect

[Kuzyo]

Hi everyone.
Some times ago I saw the similar effect was implemented on jQuery and for learning goals (I am only beginner in JS) I decide to make it work on raw JS – http://codepen.io/Kuzyo/pen/LwyAE

But found some problems which I can’t solve alone: 1) how can I make circle to move back when I click again on orange circle 2) or when you click somewhere on blank place( window for example).
I aprreciate any advice. Thanks

[CrocoDillon]

Quick and dirty:

function toggleClass(e) {
if (e.target.classList.contains(“round”)) {
blue.classList.toggle(“blueRight”);
red.classList.toggle(“redLeft”);
green.classList.toggle(“greenDown”);
} else {
blue.classList.remove(“blueRight”);
red.classList.remove(“redLeft”);
green.classList.remove(“greenDown”);
}
}

document.onclick = toggleClass;

I don’t like using `.onclick = …;`, rather use `.addEventListener(‘click’, …);`. Keep in mind that’s IE9+ though. But `.classList` is IE10+ so that’s no big deal here. I would probably restructure a thing or two to make the JS more robust and keep the styling in CSS (so no classes like `blueRight` or `redLeft`, but maybe just one class for all `expanded`)

[Kuzyo]

Hi, CrocoDillon.
I know about unsemantic classes, it’s only for practicing. Your solving is cool (without variables and so on). I know that **classList** works only in newest browsers, but I don’t know how to remove class without **classList** :(((

P.s. I owe for you help.

[CrocoDillon]

> I don’t know how to remove class without classList

Something with a RegEx replace on `.className` but I need to improve my RegEx skills to give you a more useful answer. You can Google it, but there are a lot wrong implementations out there.

> P.s. I owe for you help.

Yeap!

[Kuzyo]

Thanks, man!
I found this

function removeClass(ele,cls) {

if (hasClass(ele,cls)) {

var reg = new RegExp('(\s|^)'+cls+'(\s|$)');

ele.className=ele.className.replace(reg,' ');

}

} 

http://rockycode.com/blog/addremove-classes-raw-javascript/

and try in this way

function removeAllClases() {

function removeClass(ele,cls) {

if (hasClass(ele,cls)) {

var reg = new RegExp('(\s|^)'+cls+'(\s|$)');

ele.className=ele.className.replace(reg,' ');

}

}

removeClass( blue, "blueRight");

removeClass( red, "redLeft");

removeClass( blue, "greenDown")

}

But it didn’t work.

[Chris Coyier]

The user and all related content has been deleted.

[CrocoDillon]

function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp(‘(\s|^)’+cls+'(\s|$)’);
ele.className=ele.className.replace(reg,’ ‘);
}
}

is using another function `hasClass`, you need that one too… or just leave that part out:

function removeClass(ele,cls) {
var reg = new RegExp(‘(\s|^)’+cls+'(\s|$)’);
ele.className=ele.className.replace(reg,’ ‘);
}

[Kitty Giraudel]

May it help: http://toddmotto.com/creating-jquery-style-functions-in-javascript-hasclass-addclass-removeclass-toggleclass/

[Kuzyo]

thanks everything works fine :)

CrocoDillon, thanks for this link – http://www.learnstreet.com/, I went through their exercise, very helpful

[Kuzyo]

What is most important points in JS for web developer, on which I have to pay special attention in studying?

[Author]

Posts