I want the style to persist

Curriculum Help
1

The following javascript is used to click on a tab and style it with the active class. After it applies the style, it doesn’t persist. I want the tab to remain in the active state even after it has been clicked.

const tabs = document.getElementsByTagName("li");

for (const i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function() {

  const current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace("active");
  this.className += "active";

  });
}

This is for an assignment so it has to be javascript and not jQuery.

3

https://codepen.io/makamo66/pen/RwoQxmX

5

Thanks for your input, PaulOB.
I’m trying to re-factor my code so that I don’t have to hard code all of the repetitive logic. I’m not sure how to loop through the listelements for starters. This doesn’t work:

for (const i = 1; i < 5; i++) {	
    let listelement[i] = document.createElement('li');
	liststart.appendChild(listelement[i]);
	}
6

In your loop you used constant.
It should be something else.

7

I tried this:


for(const i = 1; i < 5; i++) {
  let myli = document.createElement('li');
  myli.innerHTML = "TAB "+i;
  liststart.appendChild(myli);
}

This creates TAB 1 but nothing else. It doesn’t create the second through fourth tabs.

8

I switched from const i = 1 to let i = 1 and now it works.

9

Do you understand why it is working now?
I mean the difference between const, let and var.

10

let can change values and const remains just the initialized value

11

Then my work here is done!
(dramatically flies away in general direction of the setting sun)