The class of the element change using the javascript

Question

currently I am trying to implement the change in the class of the element using javascript, and currently the problem is that when i press on the home page, the last page does not get disselected. my javascript code is

 var pageLayout = document.getElementById("page-layout");
 var contactPage = document.getElementById("contact-page");
 var aboutPage = document.getElementById("about-page");
 var home = document.getElementById("Home");

 home.onclick= function () {
   for (var i = 0, j = contactPage.length; i < j; i++){
     if(homepages[i].classList.contains("current-page")){
        homepages[i].classList.remove("current-page");            
     }
   }
   home.classList.add("current-page");
}

my DOM elements

 <ul>
   <li><a href="#" class="current-page" id="Home">Home</a></li>
   <li><a href="#" id="about-page">About</a></li>
   <li><a href="#" id="contact-page">Contact</a></li>
 </ul>

what could be the issue? how to improve?

edit: i did use the code that day

   var pageLayout = document.getElementById("page-layout");
    var contactPage = document.getElementById("contact-page");
    var aboutPage = document.getElementById("about-page");
    var home = document.getElementById("Home");

    homepages = [contactPage ,aboutPage, home];

    home.onclick= function () {
        for (var i = 0, j = homepages.length - 1; i < j; i++) {
            if(homepages[i].classList.contains("current-page")){
            homepages[i].classList.remove("current-page");
            
        }
        }
        home.classList.add("current-page");
    

    }
    aboutPage.onclick = function () {
        for (var i = 0, j = homepages.length - 1; i < j; i++) {
            if (homepages[i].classList.contains("current-page")) {
            homepages[i].classList.remove("current-page");

                }
            }
            aboutPage.classList.add("current-page");

        }
        contactPage.onclick = function () {
                for (var i = 0, j = homepages.length - 1; i < j; i++) {
                    if (homepages[i].classList.contains("current-page")) {
                        homepages[i].classList.remove("current-page");

                    }
                }
                contactPage.classList.add("current-page");

            }

however run into this issue:

@RobMoll my bad, it was defined in my actual file though. I have edited the question — Anasacia
– Anasacia, Commented Aug 15, 2021 at 13:48

Rob Moll · Accepted Answer · 2021-08-15 14:09:57Z

It looks like this line:

for (var i = 0, j = contactPage.length; i < j; i++){

should be:

for (var i = 0; j = homepages.length - 1; i < j; i++){

Or better yet:

for (var i = 0; i < homepages.length - 1; i++){

Here is a snippet to demonstrate:

var pageLayout = document.getElementById("page-layout");
var contactPage = document.getElementById("contact-page");
var aboutPage = document.getElementById("about-page");
var home = document.getElementById("Home");

homepages = [contactPage, aboutPage, home];

home.onclick = function() {
  for (var i = 0; i < homepages.length - 1; i++){
    if (homepages[i].classList.contains("current-page")) {
      homepages[i].classList.remove("current-page");

    }
  }
  home.classList.add("current-page");
}

.current-page {
  color: red;
}

<ul>
  <li><a href="#" class="current-page" id="Home">Home</a></li>
  <li><a href="#" id="about-page">About</a></li>
  <li><a href="#" id="contact-page">Contact</a></li>
</ul>

charlietfl · Accepted Answer · 2021-08-15 13:59:32Z

You are heading down a path where you are going to duplicate onclick functionality by copying code blocks numerous times for each of the links shown.

You can make the whole thing generic with one click event listener on the <ul> and query for the current page class to remove it and add the class to the target of the event

const nav = document.querySelector('#nav');

nav.addEventListener('click', function(e){
   // remove current claass from whichever element already has it
   nav.querySelector('.current-page').classList.remove('current-page');
   // add current class to  element that was clicked
   e.target.classList.add('current-page');
   // use the id to do some conditional logic if needed
   console.log('Selected =',e.target.id) 
})

#nav a.current-page{color:red}

<ul id="nav">
  <li><a href="#" class="current-page" id="Home">Home</a></li>
  <li><a href="#" id="about-page">About</a></li>
  <li><a href="#" id="contact-page">Contact</a></li>
</ul>

Hoàn Phạm Lê · Accepted Answer · 2021-08-15 14:00:15Z

0

You can just only compare i with the array length. It's should be like this

 var pageLayout = document.getElementById("page-layout");
 var contactPage = document.getElementById("contact-page");
 var aboutPage = document.getElementById("about-page");
 var home = document.getElementById("Home");

 home.onclick= function () {
   for (var i = 0; i < contactPage.length; i++){
     if(homepages[i].classList.contains("current-page")){
        homepages[i].classList.remove("current-page");            
     }
   }
   home.classList.add("current-page");
}

But I think you have to make sure about where contactPage and homepages come from

answered Aug 15, 2021 at 14:00

Hoàn Phạm Lê

31 bronze badge

Comments

hamid-davodi · Accepted Answer · 2021-08-15 14:30:13Z

0

I am not sure what is your goal, but if you want to move "current-page" class between links, you could use forEach() in JavaScript:

var pageLayout = document.getElementById("page-layout");
var contactPage = document.getElementById("contact-page");
var aboutPage = document.getElementById("about-page");
var home = document.getElementById("Home");

homepages = [contactPage, aboutPage, home];
let currentPage;

homepages.forEach(element => {

    if (element.classList.contains("current-page")) {
        currentPage = element;
    }

    element.onclick = function() {

        if (element !== currentPage) {
            removeClassAll();
            element.classList.add("current-page");
            currentPage = element;
        }
    }
});


function removeClassAll() {
    homepages.forEach(elem => {
        elem.classList.remove("current-page")
    })
}

.current-page {
color: red
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <ul>
        <li><a href="#" class="current-page" id="Home">Home</a></li>
        <li><a href="#" id="about-page">About</a></li>
        <li><a href="#" id="contact-page">Contact</a></li>
    </ul>

</body>

</html>

answered Aug 15, 2021 at 14:30

hamid-davodi

2,0044 gold badges15 silver badges35 bronze badges

2 Comments

Anasacia Over a year ago

it seems like after I have edited the code the class on the last element did not delete

hamid-davodi Over a year ago

If you use only the code that I put there it works for moving class between links, but if you combined some other codes to it, maybe it causes some problems.

Collectives™ on Stack Overflow

The class of the element change using the javascript

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related