Add new class to existing class when the page is loaded-CodePudding

Hello everyone I try to add a new class 'visible' to existing class 'menu' when the page is ready and all elements are loaded.

This is the code that I use.

.point {
  position: absolute;
  top: 50%;
  left: 50%;
}

.menu ul {
  background: rgb(255, 255, 255);
  height: 0px;
  opacity: 0;
  position: absolute;
  transition: .5s ease-in-out;
  transition-delay: 0.2s;
}

.menu li:hover ul {
  width: 300px;
  height: 200px;
  top: 30px;
  left: 30px;
  opacity: 1;
}

.menu li {
  list-style-type: none;
}

.menu ul li a {
  list-style-type: none;
  text-decoration: none;
  text-align: left;
  color: rgb(66, 66, 66);
}

.menu ul li h1 {
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: none;
  text-decoration: none;
  text-align: left;
}

.point div {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #999;
  z-index: 1;
  cursor: grab;
}

.point:hover div {
  background: #000;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 2;
  cursor: grab;
}

nav.menu {
  visibility: hidden;
}

nav.menu.visible {
  visibility: visible;
}

<body>
  <canvas ></canvas>
  <div ></div>
  <nav >
    <li>
      <div >
        <div ></div>
        <ul>
          <li>
            <h1 href="#">num</h1>
          </li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
        </ul>
      </div>
    </li>
  </nav>
</body>

https://jsfiddle.net/pect25L3/

I tryed

window.onload = function() {
document.getElementById('menu').className = 'visible';
};

But nothing happens. Where can be my mistake?

Thank you.

CodePudding user response：

first you are trying to use an id selector for a class selector, this is a working code

const visibleMenu = () =>{

const menu = document.querySelector('.menu');
menu.classList.add('visible')
};
window.onload = visibleMenu()

CodePudding user response：

The problem is '.menu' is a class in your HTML and you are using 'getElementById' in your JS.

CodePudding user response：

your trying to get class='menu' with getById. change class to id

window.onload = function() {
document.getElementById('menu').className = 'visible';
};

.point {
  position: absolute;
  top: 50%;
  left: 50%;
}

.menu ul {
  background: rgb(255, 255, 255);
  height: 0px;
  opacity: 0;
  position: absolute;
  transition: .5s ease-in-out;
  transition-delay: 0.2s;
}

.menu li:hover ul {
  width: 300px;
  height: 200px;
  top: 30px;
  left: 30px;
  opacity: 1;
}

.menu li {
  list-style-type: none;
}

.menu ul li a {
  list-style-type: none;
  text-decoration: none;
  text-align: left;
  color: rgb(66, 66, 66);
}

.menu ul li h1 {
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: none;
  text-decoration: none;
  text-align: left;
}

.point div {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #999;
  z-index: 1;
  cursor: grab;
}

.point:hover div {
  background: #000;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 2;
  cursor: grab;
}

nav.menu {
  visibility: hidden;
}

nav.menu.visible {
  visibility: visible;
}

<body>
  <canvas ></canvas>
  <div ></div>
  <nav id="menu">
    <li>
      <div >
        <div ></div>
        <ul>
          <li>
            <h1 href="#">num</h1>
          </li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
        </ul>
      </div>
    </li>
  </nav>
  <script>document.getElementById('menu').className = 'visible';</script>
</body>