Toggle class to an element by click another element

Question

I want to click on an element to toggle a class being referenced on a completely unrelated element (not a child, parent or sibling)

For example, initially the code w

Answer 1

You need to add event handlers. This can be done by simple setting the onClick property on the Element object:

document.getElementById('button').onClick = function onClick() {
  document.getElementsByClassName('navigation')[0].className += 'open';
};

However, it's preferable that you use addEventListener so multiple event listeners can be added to the same element:

document.getElementById('button').addEventListener('click', function onClick() {
  document.getElementsByClassName('navigation')[0].className += 'open';
}, false);

EDIT: It's also better to cache your element references in variables like so:

var button = document.getElementById('button');
var nav = document.getElementsByClassName('navigation')[0];

button.addEventListener('click', function onClick() {
  nav.className += 'open';
}, false);

EDIT2: as in Zakaria's answer, you may want to use classList.add(x) instead of className += x. It's more in line with how jQuery's things work. However, be aware that classList is not supported in older versions of IE.

EDIT3: Here's a final version using classList.toggle

var button = document.getElementById('button');
var nav = document.getElementsByClassName('navigation')[0];

button.addEventListener('click', function onClick() {
  nav.classList.toggle('open');
}, false);

And here's a quick replacement for classList using className instead:

function classList(elem) {
  var cl = {
    add: function (clas) { 
      elem.className += clas; 
    },
    remove: function (clas) { 
      elem.className = elem.className.replace(clas, ''); 
    },
    toggle: function (clas) {
      if (elem.className.indexOf(clas) > -1) {
        cl.remove(clas);
      } else {
        cl.add(clas);
      }
    }
  };
  return cl;
}

// usage
classList(nav).add('open');
classList(nav).toggle('open');