#150: Hey designers, if you only know one thing about JavaScript, this is what I would recommend

Sometimes, to start a journey into learning something huge and complex, you need to learn something small and simple. JavaScript is huge and complex, but you can baby step into it by learning small and simple things. If you’re a web designer, I think there is one thing in particular that you can learn that is extremely empowering.

This is the thing I want you to learn: When you click on some element, change a class on some element.

Boiling that down to the absolute essentials, imagine we have a button and a div:

<button>
  Click Me
</button>

<div>
  I'm an element
</div>

The div can have some base styles and it can have some styles when it has a particular class:

div {
  /* base styles */
}
div.yay {
  /* styles when it has this class */
}

Astute CSS-Tricksters might recognize this as an opportunity for the checkbox hack, but that’s not what we’re working on today.

We want to attach an “event listener” to the button: a bit of code to “listen” for, in our case, click events, and when that happens, run more code.

You know how in CSS we need to “select” elements in order to style them? We need to do that in JavaScript as well to attach our event listener. We’ll create a “reference” to the button, as a variable, like this:

var button = document.querySelector("button");

Now that we have a reference to the button, we’ll attach that event listener:

button.addEventListener("click", function() {
  /* run code here, after the button is clicked. */
});

And what do we want to do in the event of a click? Add a class name to our div! But just like we needed a reference for the button in order to do things with it, we’ll need a reference for the div as well. Let’s do them both at the same time, here’s the entire bit of code:

var button = document.querySelector("button");
var element = document.querySelector("div");

button.addEventListener("click", function() {
  element.classList.toggle("yay");
});

That’s the entire thing I wanted to show you. With some CSS added to that “yay” class, we can fade in and out the div:

See the Pen Click Something / Change Class by Chris Coyier (@chriscoyier) on CodePen.

Why this one thing?

The design possibilities are endless when you control the CSS and the state of any element (what class names it has). Hiding and revealing things is the obvious power, but it really could be anything.

Leveling Up

Remember that you aren’t limited to changing one class name. You could change multiple classes on a single element or change the classes on multiple elements.

Look into the classList property more. “Toggle” isn’t the only option.

Just like HTML and CSS, JavaScript has different levels of browser support for things. Look into the browser support for classList and add addEventListener. Are you OK with those levels of support for your project? If not, you could look into polyfills, or even jQuery.

We used the “click” event, but there are loads of others. Other mouse events, scrolling, keyboard, and more. Many hundred.

The method we used for selecting was document.querySelector. This was useful because it returns a single element for us to work with. Plus, the selectors you give it are just like CSS selectors. document.querySelector("#overlay .modal > h2"); would be a legit selection. This isn’t the only method for selecting though, there are others like getElementById, querySelectorAll, getElementsByClassName, and more.

Here’s an example of where we select a bunch of navigation items and attach a click handler to all of them at once:

See the Pen Change Classes on Stuff by Chris Coyier (@chriscoyier) on CodePen.

If the JavaScript that we wrote in our little example failed to load for any reason, we’d still have a button that says “Click Me”. But clicking it wouldn’t do a heck of a lot, would it? Perhaps we could insert that button with JavaScript, so the button isn’t even there unless we know it will work? Good idea, eh? ;)