CODEWITHSUNDEEP
javascripthtmlcss
MightyCactus
MightyCactus

Reputation: 13

Trying to toggle background color with JS

I'm new to JavaScript and I'm trying to get a button to change the background color of an element by changing it's class. I've combined js from a few different sources, but it's not working and I can't figure out why.

 
 
 function myFunc() {
   var y = document.getElementById("bg-change1").getAttribute("class");
   if (y === "normal") {
     y = "active";
   } else {
     y = "normal";
   }
 }
.normal {
  background-color: white;
}

.active {
  background-color: green;
}
<body>
  <button onclick="myFunc()">click here</button>
  <div id="bg-change1" class="normal">
    <p>Lorem ipsum and etc</p>
  </div>
</body>

Upvotes: 1

Views: 1451

Answers (6)

Niklas Higi
Niklas Higi

Reputation: 2309

getAttribute("class") returns the content of the attribute at the moment you call it. Since that is a string there's no reference to the element. Reassigning y therefore doesn't do anything.

To actually change the attribute you can use setAttribute("class", "active"). But that's not a good solution because you can't have more than one class and the normal class is unnecessary.

Just apply the default styles using a different selector (#bg-change1 for example) and override properties that you want to change in the .active selector. You can then switch between both "modes" using document.getElementById("bg-change1").classList.toggle("active").

Upvotes: 1

Jitendra Chaudhari
Jitendra Chaudhari

Reputation: 64

Here you are retrieving class in y and changing class name but it doesnt set to element back.

instead you can use 

function myFunc() {
  var y = document.getElementById("bg-change1").getAttribute("class");
  if (y === "normal") {
    document.getElementById("bg-change1").classList.remove('normal');
    document.getElementById("bg-change1").classList.add('active');
  } else {
    document.getElementById("bg-change1").classList.remove('active');
    document.getElementById("bg-change1").classList.add('normal');
  }
}

Upvotes: 0

kawnah
kawnah

Reputation: 3414

That's a bit of a runaround way to add and remove a class. I would suggest implementing the toggle class method, see below:

 
 
 function myFunc() {
   var y = document.getElementById("bg-change1");
   y.classList.toggle("active");
 }
.normal {
  background-color: white;
}

.active {
  background-color: green;
}
<body>
  <button onclick="myFunc()">click here</button>
  <div id="bg-change1" class="normal">
    <p>Lorem ipsum and etc</p>
  </div>
</body>

Upvotes: 1

Hanif
Hanif

Reputation: 3795

You can do it short format with pure JavaScript:

function myFunc() {
   var y = document.getElementById("bg-change1");
   y.classList.toggle("active")
}

But keep it mind the current css selector order need to must to give the '.active' class precedence over '.normal'.

Upvotes: 1

j08691
j08691

Reputation: 207901

You successfully get the attribute but you never change or set it. Do that with document.getElementById("bg-change1").setAttribute("class", y);

Example:

function myFunc() {
  var y = document.getElementById("bg-change1").getAttribute("class");
  if (y === "normal") {
    y = "active";
  } else {
    y = "normal";
  }
  document.getElementById("bg-change1").setAttribute("class", y);
}
.normal {
  background-color: white;
}

.active {
  background-color: green;
}
<button onclick="myFunc()">click here</button>
<div id="bg-change1" class="normal">
  <p>Lorem ipsum and etc</p>
</div>

Upvotes: -1

Temani Afif
Temani Afif

Reputation: 272901

You need to assign the value at the end, you are only getting the value which isn't enough. You are simply missing document.getElementById("bg-change1").setAttribute("class",y); at the end of the function.

function myFunc() {
   var y = document.getElementById("bg-change1").getAttribute("class");
   if (y === "normal") {
     y = "active";
   } else {
     y = "normal";
   }
   document.getElementById("bg-change1").setAttribute("class",y);
 }
.normal {
  background-color: white;
}

.active {
  background-color: green;
}
<body>
  <button onclick="myFunc()">click here</button>
  <div id="bg-change1" class="normal">
    <p>Lorem ipsum and etc</p>
  </div>
</body>

Upvotes: 1

Related Questions