CODEWITHSUNDEEP
javascripthtmlcss
Fayakon
Fayakon

Reputation: 1523

CSS: Error in Toggle Classes By using Class name

i am trying to toggle classes by using class name. My code is working fine when i am toggling using id. how can i make it work only one red should be visible at one time.

function hideshowmenu() {
  var element = document.getElementsByClassName("box");
  element.classList.toggle("bg-red");
}
.bg-red {
  margin-top: 10px;
  background-color: red;
  height: 20px;
}
<div class="mainmenu " onclick="hideshowmenu()">RED1</div>
<div id="submenu" class="submenu">
  <div class="mainmenu " onclick="hideshowmenu()">RED2</div>
  <div id="box" class="box"> </div>
</div>

Upvotes: 0

Views: 232

Answers (4)

MarQWeb
MarQWeb

Reputation: 21

Check this (not sure If is this what you need):

function hideshowmenu() {
  var elements = document.getElementsByClassName("box");
  for (let a of elements) {
    a.classList.toggle("bg-red");
  }
}
.bg-red{
  margin-top:10px;
  background-color:red;
  height:20px;
}
<div class="mainmenu " onclick="hideshowmenu(this)">RED1</div>
<div id="submenu" class="submenu">
    <div class="mainmenu" onclick="hideshowmenu(this)">RED2</div>
    <div id="box" class="box"></div>
</div>

Upvotes: 2

Reza Mirzapour
Reza Mirzapour

Reputation: 443

getElementsByClassName("box") return a collection of elements, but you considered it as a single element that is your mistake. I suggest something like this:

html:

<div class="mainmenu " onclick="hideshowmenu(this)">RED1</div>
<div id="submenu" class="submenu">
    <div class="mainmenu" onclick="hideshowmenu(this)">RED2</div>
    <div id="box" class="box"></div>
</div>

js:

function hideshowmenu(el) {
    el.classList.toggle("bg-red");
}

Upvotes: 2

nightwolf555
nightwolf555

Reputation: 436

What is returned by document.getElementsByClassName("box"); is a collection. You need to specify the index to access the classList property.

You are doing:

var element = document.getElementsByClassName("box");
element.classList.toggle("bg-red");

When you should be doing

var element = document.getElementsByClassName("box");
element[0].classList.toggle("bg-red");

You could also loop through the elements if you want to toggle multiple values.

Example code fiddle https://jsfiddle.net/agy5jtb0/1/

Upvotes: 3

Adrian Kokot
Adrian Kokot

Reputation: 3246

As the name of getElementsByClassName suggest, it returns elementS, so you are getting HTMLCollection, not one element. Query the first one, like this:

function hideshowmenu() {
  var element = document.getElementsByClassName("box")[0];
  element.classList.toggle("bg-red");
}

or:

function hideshowmenu() {
  var elements = document.getElementsByClassName("box");
  elements[0].classList.toggle("bg-red");
}

Upvotes: 4

Related Questions