how to toggle or change HTML class name using Javascript-CodePudding

I try to change color of navigation bar when theme change button is clicked.

This is HTML code

<header >
  <a href="#">
    <img  alt="logo" src="img/logo.png" />
  </a>
  <nav  id="main-nav">
    <ul >
      <li>
        <a  href="#introduction">Intro</a>
      </li>
      <li>
        <a  href="#portfolio">Projects</a>
      </li>
      <li>
        <a  href="#contact">Hello</a>
      </li>
      <!-- <li><a  href="#">section4</a></li> -->
    </ul>
  </nav>
</header>

Javascript code

const themeChange = () => { 
   const navElements = document.getElementsByClassName("main-nav-link");
    // console.log("nav: "   navElements.length);
    for (let i = 0; i <= navElements.length; i  ) {
      console.log(document.getElementsByClassName("main-nav-link")[i]);
      document.getElementsByClassName("main-nav-link")[i].className =
        "main-nav-link-summer";
    }
}

I'm trying to change class name from "main-nav-link" to "main-nav-link-summer" so color for active, hover can be changed. But weirdly, only the first and third tags are changed and the second remains same. The length of "navElements" variable is 3.

Css code

.main-nav-list {
  list-style: none;
  display: flex;
  gap: 4.8rem;
  align-items: center;
  /* padding-right: 5rem; */
  /* font-size: x-large; */
}

.main-nav-link,
.main-nav-link-summer {
  text-decoration: none;
  display: inline-block;
  color: white;
  font-weight: 500;
  /* font size 1.8 */
  font-size: 2.5rem;
  transition: all 0.3s;
}

.main-nav-link-summer:hover,
.main-nav-link-summer:active {
  color: #1d4116;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #a63ec5;
}

.sticky {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 999;
  box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03);
  opacity: 0.8;
}

.sticky .main-nav-link {
  color: #46244c;
}

.sticky .main-nav-link:hover,
.sticky .main-nav-link:active {
  color: #a63ec5;
}

CodePudding user response：

in javascript that's the easiest way, for what you wanna achieve I'm not exactly sure.

const navElements = document.querySelectorAll(".main-nav-link");

navElements.forEach((link) => {
  link.classList.add("main-nav-link-summer");
});

.main-nav-list {
  list-style: none;
  display: flex;
  gap: 4.8rem;
  align-items: center;
  /* padding-right: 5rem; */
  /* font-size: x-large; */
}

.main-nav-link,
.main-nav-link-summer {
  text-decoration: none;
  display: inline-block;
  color: white;
  font-weight: 500;
  /* font size 1.8 */
  font-size: 2.5rem;
  transition: all 0.3s;
}

.main-nav-link-summer:hover,
.main-nav-link-summer:active {
  color: #1d4116;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #a63ec5;
}

.sticky {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 999;
  box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03);
  opacity: 0.8;
}

.sticky .main-nav-link {
  color: #46244c;
}

.sticky .main-nav-link:hover,
.sticky .main-nav-link:active {
  color: #a63ec5;
}

<header >
  <a href="#">
    <img  alt="logo" src="img/logo.png" />
  </a>
  <nav  id="main-nav">
    <ul >
      <li>
        <a  href="#introduction">Intro</a>
      </li>
      <li>
        <a  href="#portfolio">Projects</a>
      </li>
      <li>
        <a  href="#contact">Hello</a>
      </li>
      <!-- <li><a  href="#">section4</a></li> -->
    </ul>
  </nav>
</header>

CodePudding user response：

I'd suggest a different approach all together. Going through and doing mass class name changes is really sub-optimal for dev and maintenance. Perhaps consider an approach like the example below instead as a simple proof of concept using separated css var themes so as you build you don't think about such things and can handle a design system much more flexibly without piling on lots of unnecessary extra code. Cheers.

const htmlEl = document.documentElement;

// set a detault or read their saved selection from localstorage or whatever.
htmlEl.dataset.theme = 'default';
      
// set the new selectiong when made.
toggleTheme = (theme) => htmlEl.dataset.theme = theme;

html[data-theme="default"] {
  --body-bg: #f1f1f1;
  --body-color: #000;
  --btn-color: #212121;
  --btn-bg: #fff;
  --btn-hover-color: #a63ec5;
  --btn-hover-bg: #ddd;
}

html[data-theme="summer"] {
  --body-bg: lightblue;
  --body-color: #000;
  --btn-color: darkgreen;
  --btn-bg: lightyellow;
  --btn-hover-color: #1d4116;
  --btn-hover-bg: #f1f1f1;
}

html[data-theme="winter"] {
  --body-bg: #333;
  --body-color: #fff;
  --btn-color: #f1f1f1;
  --btn-bg: #212121;
  --btn-hover-color: lightblue; 
  --btn-hover-bg: #555;
}

html {
  color: var(--body-color);
  background-color: var(--body-bg);
}

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  /* padding-right: 5rem; */
  /* font-size: x-large; */
}

.main-nav-link {
  text-decoration: none;
  display: inline-block;
  color: var(--btn-color);
  background-color: var(--btn-bg);
  padding: .25rem 1rem;
  border-radius: 5px;
  font-weight: 500;
  /* font size 1.8 */
  font-size: 2.5rem;
  transition: all 0.3s;
}

.main-nav-list li:not(:last-child) {
  margin-right: 1.5rem;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: var(--btn-hover-color);
  background-color: var(--btn-hover-bg);
}

<br>
<strong>Choose your theme:</strong>
<select id="mySelect" onchange="toggleTheme(this.value)">
  <option value="default">Default</option>
  <option value="summer">Summer</option>
  <option value="winter">Winter</option>
</select>

<br><hr><br>

<header >
  <a href="#">
    <img  alt="logo" src="img/logo.png" />
  </a>
  <nav  id="main-nav">
    <ul >
      <li>
        <a  href="#introduction">Intro</a>
      </li>
      <li>
        <a  href="#portfolio">Projects</a>
      </li>
      <li>
        <a  href="#contact">Hello</a>
      </li>
      <!-- <li><a  href="#">section4</a></li> -->
    </ul>
  </nav>
</header>