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: enter image description here

• Rob Moll: Your code does not show homepages being defined.
• Anasacia: @RobMoll my bad, it was defined in my actual file though. I have edited the question

Answer 1

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>

Answer 2

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>

Answer 3

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

Answer 4

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>

• Anasacia: it seems like after I have edited the code the class on the last element did not delete
• hamid-davodi: 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.