#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? ;)

Comments

  1. User Avatar
    Shaun
    Permalink to comment#

    Nice site, I just know I’ll be coming back again and again.

  2. User Avatar
    Branimir Todorovic
    Permalink to comment#

    Best thing I have seen this year. Thank you.

  3. User Avatar
    Marco Koch
    Permalink to comment#

    Why ist there this fancy looking font only on the word class in your html box on codepen? It’s there in minute 2:11.
    It kind of looks cool classy even… funny little easter egg. =P

  4. User Avatar
    nikkolai
    Permalink to comment#

    very helpful video. not boring very interesting and informative!! :) please keep it coming..

  5. User Avatar
    Andrew
    Permalink to comment#

    Love this! As a web designer I’ve been putting off diving into JavaScript, but this really makes me excited to jump in and start making awesome stuff!

  6. User Avatar
    Nicholas
    Permalink to comment#

    thanks Chris for the motivation to jump back into JS!

  7. User Avatar
    LightYagami
    Permalink to comment#

    Nice! Thank you for introducing this magic trick!(especially the opacity and transition part)

  8. User Avatar
    Sheila Tanner
    Permalink to comment#

    Even better would be showing how to reference the script in HTML instead of inlining the event listener, especially since some cases require a strict separation between JS and HTML (Google Extensions for starters).

    window.onload=function(){var n=document.getElementByClass(“yay”);n.onclick=hideDiv};
    

    … if hideDiv had been what you called that function.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag