How can I define a set of CSS rules that can be added as class using JavaScript?

Question

I am trying to use the addClass function to add class via JavaScript, but I just can't add the class. Is there a special way to define a class that will be added to an element onclick? This is what I have tried:

var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
  if (classie.has(input, 'open'))
    classie.remove(input, 'open')
  else
    classie.add(input, 'open');
  console.log('I am back')
});

.search-bar {
  position: absolute;
  top: 30px;
  right: 60px;
  width: 300px;
  height: 40px;
  overflow: hidden;
}
.sb-label {
  position: absolute;
  right: 0px;
  display: block;
  width: 50px;
  height: 40px;
  background-color: #32ab32;
  text-align: center;
  z-index: 10;
  cursor: pointer;
}
.sb-label img {
  display: block;
  z-index: 30;
  cursor: pointer;
}
.sb-input {
  position: absolute;
  right: 0px;
  width: 50px;
  height: 40px;
  border: none;
  backface-visibility: hidden;
  transition: left 0.7s;
  z-index: 5;
}
.sb-input .open {
  z-index: 90;
}
.sb-input .open {
  width: 100%;
  transition: left 0.7s;
}

<div class="search-bar">
  <form>
    <label class="sb-label" id="sb-label">
      <img src="search-icon01.png" width="35px" height="35px">
    </label>
    <input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word">
  </form>
</div>

I added a callback and I got a message on my console, indicating that the function is ok, and when I did this, it works:

var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
  input.style.zIndex = 90;
  input.style.width = '100%';
  console.log('I did it')
});

Apparently the problem is with my stylesheet. Could somebody please help me to correct this anomaly?

you can use jquery's add class method api.jquery.com/addclass — karman
– karman, Commented Nov 19, 2016 at 11:46
its same result, it seems the problem is with my css, on defining thee open class — pedroyanky
– pedroyanky, Commented Nov 19, 2016 at 11:48
You are not adding css class in your description above. Can you please post whole code above, or create a fiddle for it. — karman
– karman, Commented Nov 19, 2016 at 11:50

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

I'm curious where did you get classie from? Use classList, I think classie is too classy for us lowly developers:P

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .search-bar {
      position: absolute;
      top: 30px;
      right: 60px;
      width: 300px;
      height: 40px;
      overflow: hidden;
    }
    .sb-label {
      position: absolute;
      right: 0px;
      display: block;
      width: 50px;
      height: 40px;
      background-color: #32ab32;
      text-align: center;
      z-index: 10;
      cursor: pointer;
    }
    .sb-label img {
      display: block;
      z-index: 30;
      cursor: pointer;
    }
    .sb-input {
      position: absolute;
      right: 0px;
      width: 50px;
      height: 40px;
      border: none;
      backface-visibility: hidden;
      transition: left 0.7s;
      z-index: 5;
    }
    .sb-input .open {
      z-index: 90;
    }
    .sb-input .open {
      width: 100%;
      transition: left 0.7s;
    }
  </style>
</head>

<body>
  <div class="search-bar">
    <form>
      <label class="sb-label" id="sb-label">
        <img src="search-icon01.png" width="35px" height="35px">
      </label>
      <input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word">
    </form>
  </div>
  <script>
    var input = document.querySelector('.sb-input');
    var image = document.querySelector('.sb-label img');
    image.addEventListener('click', function() {
      if (input.classList.contains('open')) {
        input.classList.remove('open');
      } else {
        input.classList.add('open');
        console.log('i am back')
      }

    });
    var input = document.querySelector('.sb-input');
    var image = document.querySelector('.sb-label img');
    image.addEventListener('click', function() {
      input.style.zIndex = 90;
      input.style.width = '100%';
      console.log('did i do it')
    });
  </script>
</body>

</html>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 19, 2016 at 11:55

zer00ne

45.3k6 gold badges50 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

pedroyanky Over a year ago

it seems to work here, but i copied your javascript code to my editor, but it didnt work.

zer00ne Over a year ago

Is there more on your page than this Snippet? Because the code is simple and straight forward.

zer00ne Over a year ago

Don't copy the first code, copy the actual Snippet.

pedroyanky Over a year ago

thougth i have a header that contain a navigation list on the left, but that wouldn't interfer with the javascript na

zer00ne Over a year ago

Updated copy the whole thing on a blank page, then start adding anything not on the page gradually.

|

Collectives™ on Stack Overflow

How can I define a set of CSS rules that can be added as class using JavaScript?

1 Answer 1

SNIPPET

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

SNIPPET

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related