adding and removing classname with eventlistener

Question

I am trying to set eventlistener to a button

<button id="btn">click me</button>

document.getElementById('btn').addEventListener('click', function (e) {
test(e.target);
}, false);

And each time click is triggered, the other HTML element(.random ul) will get a new class of my class or remove it(on the second click)

function test() {
document.querySelector(".random ul").className = document.querySelector(".random ul").className += ' newclass'
    ? '' //need to remove the newclass
    : ''; //need to add the newclass
}

This obviously not working. I also found the following script to properly remove added classname:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
//from: http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript

I really don't know how to make it work and would like to ask you to help me with it please.

what's wrong with this one ? `document.getElementById('btn').addEventListener('click', function (e) { e.target.classList.toggle('hello') }, false);` — The Reason, Jun 07 '16 at 11:43
All modern browsers, IE9 and above. Most of mobile browsers. — alloohaa, Jun 07 '16 at 11:45
Why the downvotes? If you think this is a duplicate, please mark it accordingly instead. — nils, Jun 07 '16 at 11:53

nils · Answer 1 · 2016-06-07T11:50:22.820

1

In all modern browsers (IE 10+), you could use classList and its toggle method:

document.getElementById('btn').addEventListener('click', function (e) {
    test(e.target); // not sure why you need e.target?
}, false);

function test() {
    document.querySelector('.random ul').classList.toggle('newclass');
}

toggle works like jQuery's toggle.

edited Jun 07 '16 at 11:50

answered Jun 07 '16 at 11:44

nils

25,734
5
70
79

Thank you, I didn't know about this approach. But unfortunately it doesn't work in IE9. – alloohaa Jun 07 '16 at 12:02

fboes · Accepted Answer · 2016-06-07T12:03:36.910

I applaud you for not using jQuery. Some time ago I took the dive myself. This script may solve your problem, even for very old browsers:

function toggleClass (el, className) {
  if (el.classList) {
    el.classList.toggle(className);
  } else {
    if (el.className.match(new RegExp('(^|\\s)'+className+'(\\s|$)','g'))) {
      el.className = el.className.replace(new RegExp('\\s?' + className), '');
    }
    else {
      el.className += ((el.className !== '') ? ' ' : '') + className;
    }
  }
}


document.getElementById('btn').addEventListener('click', function (e) {
  toggleClass(document.querySelector('.random ul'), 'newclass');
}, false);

.newclass { color: red; }

<button id="btn">click me</button>

<div class="random">
  <ul>
    <li>Test</li>
  </ul>
</div>

Oh, and for more Vanilla-JS-stuff, get inspired by http://youmightnotneedjquery.com/ or my personal experiments at https://github.com/fboes/js-toolshed/blob/master/src/js-toolshed.js

adding and removing classname with eventlistener

2 Answers2