CODEWITHSUNDEEP
javascripthtmlcss
Stackinnerflow
Stackinnerflow

Reputation: 9

Changing background-colour with css/javascript

I'm trying to change a background color to yellow with JavaScript, but setting background colour to yellow doesn't work.

<a id="mobile-nav" href="#">
  <div class="container" onclick="myFunction(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3">.
    </div>
  </div>
</a>
<script>
  function myFunction(x) {
    x.classList.toggle('change');
  }
</script>

Css

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 100px;
  background-color: #333;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: yellow;
  }

I thought it was just a matter of adding background-color:yellow onto the css. I'd also like to change the width, can this be done by adding width 500px; onto tye end of the animation?

Upvotes: 0

Views: 75

Answers (4)

Aravinth Ramesh
Aravinth Ramesh

Reputation: 351

As already suggested, there is been a typo, following code worked. 

const myFunction = (x) => {
  x.classList.toggle("change");
}
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 100px;
  background-color: #333;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: yellow;
}
<a id="mobile-nav" href="#">
  <div class="container" onclick="myFunction(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3">.</div>
  </div>
</a>

Upvotes: 0

Anurag Yadav
Anurag Yadav

Reputation: 294

You are doing great, also you have structured your CSS file very well as well as you have written the DOM manipulation correctly. There is just a typo of closing the brace } of .change .bar2 class.

You just have to change your CSS file.

From this- 

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: yellow;
  }

To this -

.change .bar2 {
      opacity: 6;
      transform: rotate(3000deg);
}
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: yellow;
}

And everything will be great.

Upvotes: 0

Felippe Regazio
Felippe Regazio

Reputation: 389

As Emiel Zuurbier commented, there is a typo on your CSS:

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: yellow;
  }

Must be changed to:

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: yellow;
}

Upvotes: 0

Tad Wohlrapp
Tad Wohlrapp

Reputation: 1897

Close your rule for .change .bar2 using }, then it'll work:

function myFunction(x) {
  x.classList.toggle('change');
}
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 100px;
  background-color: #333;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: yellow;
}
<a id="mobile-nav" href="#">
  <div class="container" onclick="myFunction(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3">.</div>
  </div>
</a>

Upvotes: 1

Related Questions