Convert js function to inline onclick

Question

I have this great function which toggles class with pure javascript just like i want to:

// hasClass
function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
// toggleClass
function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") >= 0 ) {
            newClass = newClass.replace( " " + className + " " , " " );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}
document.getElementById('button').onclick = function() {
    toggleClass(this, 'active');
}

I tried to convert it to inline onclick function by removing this part:

document.getElementById('button').onclick = function() {
    toggleClass(this, 'active');
}

And adding:

onclick="toggleClass(this, 'active')"

To my element, but i guess i'm doing something wrong and it doesn't function at all.

Any ideas?

*"...it doesn't function..."* is quite vague. What error(s) do you get? Have you looked in the web console? — T.J. Crowder, Jun 21 '15 at 11:45
Why do you want inline function? It is bad practice. And `onclick` as well. Look into `addEventListener`, that's the proper modern way of attaching events. — elclanrs, Jun 21 '15 at 11:47
The reason i want inline function is i want to use the same function on a lot of different elements. i think it's easier that way? am i wrong? — Ben, Jun 21 '15 at 11:52
If you want to use the same function on a lot of different elements, then thats a lot easier to do the first way: just use a loop. You have to be careful about scope, but it's way better than copying-and-pasting the attribute string zillions of times in the HTML — Mark Reed, Jun 21 '15 at 11:57
Oh Thanks Eugene. that's weird it wasn't working in jsfiddle for some reason... Great! Thanks! — Ben, Jun 21 '15 at 12:25

score 1 · Answer 1 · answered Jun 21 '15 at 11:45

1

At a guess, toggleClass isn't a global. onXyz attribute event handlers can only access global functions. It's one of the several reasons not to use them.

answered Jun 21 '15 at 11:45

T.J. Crowder

1,031,962
187
1,923
1,875

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

What you are looking for is called closures: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops.3A_A_common_mistake

Also this topic might be useful: How to generate event handlers with loop in Javascript?

edited May 23 '17 at 11:58

Community

1
1

answered Jun 21 '15 at 11:51

Mathijs Rutgers

785
4
20

Convert js function to inline onclick

2 Answers2