Changing background-colour with css/javascript

Question

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?

Your .change .bar3 selector is inside the .change .bar2. Nesting is not possible in plain CSS. But I assume this is a typo? — Emiel Zuurbier
– Emiel Zuurbier, Commented May 1, 2020 at 15:35
Look closer below the line transform: rotate(3000deg); and look how it is different from the rest of your CSS. — Emiel Zuurbier
– Emiel Zuurbier, Commented May 1, 2020 at 15:39

Tad Wohlrapp · Accepted Answer · 2020-05-01 15:39:53Z

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>

Felippe Regazio · Accepted Answer · 2020-05-01 15:43:26Z

0

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;
}

answered May 1, 2020 at 15:43

Felippe Regazio

3895 silver badges5 bronze badges

Comments

Anurag Yadav · Accepted Answer · 2020-05-01 15:47:29Z

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.

Aravinth Ramesh · Accepted Answer · 2020-05-01 15:48:41Z

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>

Collectives™ on Stack Overflow

Changing background-colour with css/javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related