CODEWITHSUNDEEP
javascripthtmlcss
CuriousLearner
CuriousLearner

Reputation: 516

Changing background color of button after click

Here is the html code related to my button. As you can see, I've tried adding an id to reference it in CSS and JS.

<div class="col-lg-8 main">
  <h1>Constructive Design</h1>
  <p>
    Aenean fermentum vestibulum ipsum, ut pretium erat sodales sodales. Pellentesque quis orci vitae dui commodo sodales et ut quam. Etiam vitae egestas purus, ut malesuada enim.</p>
  <button type="button" class="btn btn-primary" id="conbutton">Continue...</button>
</div>

This is the CSS for the main button without hover

.main button{
  background: transparent;
  border: 1.3px solid white;
  margin-top: 50px;
  width: 180px;
  height: 70px;
  color:white;;
}

This is the CSS for main button with hover

.main button:hover{
  background: transparent;
  color: #33ccff;
  border-color: #33ccff;
  transition:all 1.3s;
}

This is the CSS for the class .clbutton which I'll reference in JS.

.conbuttoncl{
  background: transparent;
}

This is the JS where I call that ID which I reference in HTML and add a class .clbutton to it. Let me know if I'm on the wrong track over here and if there's some other way to get at the same thing i.e changing background of button to transparent after my mouse clicks on it. I don't want the color of button to change to blue after a user clicks on it.

var conbutton = document.querySelector("#conbutton");
conbutton.addEventListener("click", function(){
  conbutton.classList.add(".conbuttoncl");
});

Upvotes: 0

Views: 1605

Answers (2)

Programmer Gaurav
Programmer Gaurav

Reputation: 449

You can simply Do it Using JavaScript

function bgchange() {
  document.getElementById("conbutton").style.background = "red";
}
.main button {
  background: orange;
  border: 1.3px solid white;
  margin-top: 50px;
  width: 180px;
  height: 70px;
  color: white;
}

.main button:hover {
  background: transparent;
  color: #33ccff;
  border-color: #33ccff;
  transition: all 1.3s;
}
<div class="col-lg-8 main">
  <h1>Constructive Design</h1>
  <p>
    Aenean fermentum vestibulum ipsum, ut pretium erat sodales sodales. Pellentesque quis orci vitae dui commodo sodales et ut quam. Etiam vitae egestas purus, ut malesuada enim.</p>
  <button type="button" class="btn btn-primary" id="conbutton" onclick="bgchange()">Continue...</button>
</div>

Upvotes: 1

Unbranded Manchester
Unbranded Manchester

Reputation: 1000

I changed button colours on all of your different states to show this working as in your question you had them all set to transparent.

Issue 1:

conbutton.classList.add(".conbuttoncl");

should be

conbutton.classList.add("conbuttoncl"); //Without . in class name

Issue 2: You've over specified the .main button class, which means it won't be overridden with the loose .clbutton class. Instead, just make it more precise, so this:

.conbuttoncl {

should be

.main button.conbuttoncl {

Working example:

var conbutton = document.querySelector("#conbutton");
conbutton.addEventListener("click", function() {
  conbutton.classList.add("conbuttoncl");
});
.main button {
  background: red;
  border: 1.3px solid white;
  margin-top: 50px;
  width: 180px;
  height: 70px;
  color: white;
  ;
}

.main button:hover {
  background: green;
  color: #33ccff;
  border-color: #33ccff;
  transition: all 1.3s;
}

.main button.conbuttoncl {
  background: blue;
}
<div class="col-lg-8 main">
  <h1>Constructive Design</h1>
  <p>
    Aenean fermentum vestibulum ipsum, ut pretium erat sodales sodales. Pellentesque quis orci vitae dui commodo sodales et ut quam. Etiam vitae egestas purus, ut malesuada enim.</p>
  <button type="button" class="btn btn-primary" id="conbutton">Continue...</button>
</div>

Upvotes: 1

Related Questions