How do I supplant jQuery's toggleClass method with pure JavaScript?

Question

How can I turn this piece of jQuery code into JavaScript?

$('#element').click(function(){
    $(this).toggleClass('class1 class2')
});

I have already tried the following pieces of code, but to no avail.

First one is:

var element = document.getElementById('element'),
    classNum = 0; // Supposing I know that the first time there will be that class
element.onmousedown = function() {
    if (classNum === 0) {
        this.classList.remove("class1");
        this.classList.add("class2");
        classNum = 1;
    }
    else if (classNum === 1) {
        this.classList.remove("class2");
        this.classList.add("class1");
        classNum = 0;
    }
}

Second one is:

var element = document.getElementById('element'),
    classNum = 0; // Supposing I know that the first time there will be that class
element.onmousedown = function() {
    if (classNum === 0) {
        this.className -= "class1";
        this.classList += "class2";
        classNum = 1;
    }
    else if (classNum === 1) {
        this.classList -= "class2";
        this.classList += "class1";
        classNum = 0;
    }
}

Any answer that doesn't suggest that I stick with jQuery will be greatly appreciated.

[EDIT]

I've tried all of your solutions, but haven't been able to get it right. I believe it's because I didn't state clearly that the element has multiple classes like so:

class="class1 class3 class4"

And what I want is basically to replace class1 with class2 and toggle between them.

Answer 1

Update: In response to comments, classList.toggle is a pure javascript solution. It has nothing to do with jQuery as one comment implies. If there is a requirement to support old versions of IE then there is a shim (pollyfill) at the MDN link below. And this shim, if needed, is far superior to the accepted answer.

Using classList.toggle certainly seems like the simplest solution. Also see Can I Use classList for browser support.

element.onclick = function() {
  'class1 class2'.split(' ').forEach(function(s) {
      element.classList.toggle(s);
  });
}

Run the snippet to try

box.onclick = function() {
  'class1 class2'.split(' ').forEach(function(s) {
    box.classList.toggle(s);
    stdout.innerHTML = box.className;
  });
}


/* alternative 
box.onclick = function() {
  ['class1', 'class2'].forEach(function(s) {
    box.classList.toggle(s);
    stdout.innerHTML = box.className;
  });
}
*/

.class1 { background-color: red;}
.class2 { background-color: blue;}
.class3 { width: 100px; height: 100px; border: 1px black solid;}

click me:
<div id="box" class="class1 class3"></div>

<div id="stdout"></div>

Answer 2

classNum is a local variable.

Every time the event handler is called, you get a new variable, which has nothing to do with the value from the last call.

You want that to be a global variable.

Or, better yet, check classList.contains instead.

Answer 3

From: You might not need jQuery

$(el).toggleClass(className);

Is replaced by:

if (el.classList) {
  el.classList.toggle(className);
} else {
  var classes = el.className.split(' ');
  var existingIndex = classes.indexOf(className);

  if (existingIndex >= 0)
    classes.splice(existingIndex, 1);
  else
    classes.push(className);

  el.className = classes.join(' ');
}

Then simply wrap that function call within a document.getElementById('elementId').click

Answer 4

See fiddle: https://jsfiddle.net/2ch8ztdk/

var s = document.getElementById('element');
s.onclick=function(){
  if(s.className == "class1"){
    s.className = "class2"
  } else {
    s.className = "class1"
  }
}

Answer 5

Your code is close, but your classNum variable isn't iterative. Try this:

var element = document.getElementById("element");
var numCount = 0;

element.addEventListener('click', function() {
	if (numCount === 0) {
		this.className = "";
        this.className += " class1";
        numCount++;
	} else {
        this.className = "";
		this.className += " class2";
        numCount = 0;
	}
});

.class1 {
  color: red;
}
.class2 {
  color: blue;  
}

<div id="element">click me</div>

Answer 6

you can use classList, but it only support IE 10+

Demo

  var eles = document.querySelectorAll('#element');
  var classNames = 'one two';

  for(var i = 0; i < eles.length; i ++){
    eles[i].onclick = function(e){
      toggleClass.call(this, classNames);
    }
  }

  function toggleClass(names){
    var sp = names.split(' ');
    for(var i = 0; i < sp.length; i++){
      this.classList.toggle(sp[i]);
    }

  }