Changing a class css style with javascript

Question

My problem is that I'm trying to change my "nav-links" style in js because I had it displayed as none on my CSS so I was trying to display it as "block" on my js when I click the class "burger" and having my style back again but when I click the class "burger" the "nav-links" appear so that means that the nav2.style.display = "block"; is working but the rest of the .style isn't working and I don't understand why. If anyone could help me I would really appreciate it.

What im trying to change:

I'm using the function showhide() so I can use a onclick on the <div class="burger" **onclick= "showhide()"**>

var clicked = 0;
var nav2 = document.querySelector('.nav-links');

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');

  burger.addEventListener('click', () => {

    //Toggle Nav

    nav.classList.toggle('nav-active');

    //Animate Links

    navLinks.forEach((link, index) => {

      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`
      }

    });

    //Burger Animation
    burger.classList.toggle('toggle');

  });
}

if (window.matchMedia("(max-width: 858px)")) {

  function showhide() {
    clicked++;
    console.log(clicked)

    if (clicked == 1) {
      nav2.style.position = "absolute";
      nav2.style.right = "0px";
      nav2.style.height = "92vh";
      nav2.style.top = "8vh";
      nav2.style.backgroundColor = "#000000";
      nav2.style.display = "flex";
      nav2.style.flexDirection = "column";
      nav2.style.transition = "transform 0.5s ease-in";
      nav2.style.display = "block";
    };

    if (clicked == 2) {
      nav2.style.display = "none";
      clicked = 0;
    }
  };
}

navSlide()

.nav-links {
  position: absolute;
  right: 0px;
  height: 92vh;
  top: 8vh;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  transform: translateX(100%);
  transition: transform 0.5s ease-in;
  display: none;
}

<nav>
  <img class="cabecalho-logo" src="https://via.placeholder.com/100" alt="Circle Logo">

  <ul class="nav-links">
    <li><a href="carrosview.html">Carros</a></li>
    <li><a href="">Motas</a></li>
    <li><a href="">Barcos</a></li>
    <li><a href="registarentrar.html">Entrar / Registar</a></li>
  </ul>

  <div class="burger" onclick="showhide()">
    <div class="line1">---</div>
    <div class="line2">---</div>
    <div class="line3">---</div>
  </div>
</nav>

Welcome. I put your code in a snippet demo and fixed a faulty class name. Please revise further as needed using the link below the snippet output. Also, take the tour so you know how this site works. — isherwood
– isherwood, Commented Feb 23, 2022 at 22:10
I think your code might be working as intended, but your UL is positioned off screen. If you adjust the "right" property, you'll see it appear and disappear. — Joe Fitzsimmons
– Joe Fitzsimmons, Commented Feb 23, 2022 at 22:18
If I change the "right" property the black rectangle will move but I want to change the style of what is inside (the "li" tags), not the black rectangle, the only thing I want with the black rectangle is it to appear and thats working. — Miguel F
– Miguel F, Commented Feb 23, 2022 at 22:30

Rmaxx · Accepted Answer · 2022-03-01 09:55:44Z

well, there's so much going on in your script that makes very little sense, so i just made some changes so maybe you can see whats going on bit better.

Just to name a few: First of all your using a function with an eventlistener on the button, which is perfect, but you also use an onlick event. This makes no sense. You can combine those.

The constants are inside the function, which in this case also makes no sense.. nav and nav2 are even exactly the same element?!

You're toggling a class .nav-active which isnt in the css at all?! whats the idea?'

So you're showing a code that can work perfectly by just adding or removing a class, but are trying to activate all kinds of styles seperatly.. which also makes no sense.

Using the ++ to get clicked to 0 or 1 canbe done by simply making it true or false.

I'm not sure what you want with the JS matchmedia, you can easily do this inside the css also, i left it there, but you might as well delete this whole part.

Anyway, look at the code and try some more... this can be reduced to like 2 or 3 lines eventually, but keep learning and you'll get there!

var clicked = 0;
const nav = document.querySelector('.nav-links');
const burger = document.querySelector('.burger');
const navLinks = document.querySelectorAll('.nav-links li');

const navSlide = () => {

  burger.addEventListener('click', () => {
    burger.classList.toggle('toggle');
    showhide();
  });
}

if (window.matchMedia("(max-width: 858px)")) {

  function showhide() {
    nav.classList.toggle('clicked');
    
    clicked = !clicked;

    if (clicked) {
      // if clicked true
    };

    if (!clicked) {
      // if not
    }
  };
}

navSlide()

.nav-links {
  position: absolute;
  right: 0px;
  height: 92vh;
  top: 8vh;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  transform: translateX(100%);
  transition: all 0.5s ease-in;
  display: block;
}

.nav-links.clicked{
      right:0px;
        transform: translateX(-100%);
      display:flex;
      transition: all 0.5s ease-in;
}

<nav>
  <img class="cabecalho-logo" src="https://via.placeholder.com/100" alt="Circle Logo">

  <ul class="nav-links">
    <li><a href="carrosview.html">Carros</a></li>
    <li><a href="">Motas</a></li>
    <li><a href="">Barcos</a></li>
    <li><a href="registarentrar.html">Entrar / Registar</a></li>
  </ul>

  <div class="burger">
    <div class="line1">---</div>
    <div class="line2">---</div>
    <div class="line3">---</div>
  </div>
</nav>

I already fixed it and yeah there was a lot of errors... :/ Thanks for the answer!

Collectives™ on Stack Overflow

Changing a class css style with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related