How can I add a new class into a div in Js?

[Ayala]

Hi,

https://codepen.io/Ayalann/pen/WjXqYV

I want to add the class “.visible” into the div with id “text” when I click on the input.

So what I want: The text is hide until I click on the input. The text should be visible only when the input is on focus.

[Atelierbram]

First you want to include the jQuery library in the demo: behind the gear icon, in the javascript tab.

$( "#input" ).focus(function() {
    $('#text').addClass('visible');
});

$( "#input" ).focusout(function() {
    $('#text').removeClass('visible');
});

My fork of your demo:

http://codepen.io/atelierbram/pen/WjXVBp

[Ayala]

It is beautiful! Thank you!

[Atelierbram]

Your welcome. Since you are using jQuery, it’s API can help you out with these helper functions and it’s syntax. Examples on each of those as well: api.jquery.com

[Ayala]

Good website, thanks!

[processprocess]

You do not need JQuery for this. You can achieve this easily with pure JS.
It’s a little more code to write, however your app will load faster because the user does not have to download JQuery.

const input = document.querySelector('#input');
const text = document.querySelector('#text');

input.addEventListener('focus', () => text.classList.toggle('visible'));
input.addEventListener('blur', () => text.classList.remove('visible'));

http://codepen.io/philipbell/pen/aWYaXy?editors=1111

[Atelierbram]

Kudos for the ES5 syntax. Totally agree with not needing large frameworks for basic Dom manipulation.
One thing to keep in mind though is “how to best help the original poster’; like here Ayala is clearly a beginner, having enough trouble as it is with jQuery, but that’s not a bad place to start dipping your toes in.

You can achieve this easily …

You make it look easy, but that IMO is the difficult part.

[processprocess]

My bad, I should never use language about difficulty. That’s all subjective and I struggle every day, this stuff isn’t easy.

Core JS is becoming so powerful! Seems like a good chance to start people off with it!

OP, this might be a more readable syntax:

const input = document.querySelector('#input');
const text = document.querySelector('#text');

input.addEventListener('focus', function() {
  text.classList.toggle('visible');
});

input.addEventListener('blur', function() {
  text.classList.remove('visible');
});

The arrow’s in the earlier example is purely a shorthand syntax, but it makes for faster coding!

[Author]

Posts