# I want the style to persist

**URL:** <https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [February 26, 2021, 3:24pm UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587 "2021-02-26T15:24:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![makamo66](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/makamo66/32/126398_2.png) [@makamo66](https://forum.freecodecamp.org/u/makamo66)\
**Post date:** [February 26, 2021, 3:24pm UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587/1 "2021-02-26T15:24:52Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![makamo66](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/makamo66/32/126398_2.png) [@makamo66](https://forum.freecodecamp.org/u/makamo66)\
**Post date:** [February 26, 2021, 3:44pm UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587/3 "2021-02-26T15:44:34Z")

</div>

[https://codepen.io/makamo66/pen/RwoQxmX](https://codepen.io/makamo66/pen/RwoQxmX)

---

<div class="post-metadata">

**Author:** ![makamo66](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/makamo66/32/126398_2.png) [@makamo66](https://forum.freecodecamp.org/u/makamo66)\
**Post date:** [February 27, 2021, 1:17am UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587/5 "2021-02-27T01:17:09Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![MyTrueName](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mytruename/32/41229_2.png) [@MyTrueName](https://forum.freecodecamp.org/u/MyTrueName)\
**Post date:** [February 27, 2021, 2:20am UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587/6 "2021-02-27T02:20:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![makamo66](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/makamo66/32/126398_2.png) [@makamo66](https://forum.freecodecamp.org/u/makamo66)\
**Post date:** [February 27, 2021, 12:44pm UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587/7 "2021-02-27T12:44:14Z")

</div>

I tried this:

```auto

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.

---

<div class="post-metadata">

**Author:** ![makamo66](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/makamo66/32/126398_2.png) [@makamo66](https://forum.freecodecamp.org/u/makamo66)\
**Post date:** [February 27, 2021, 1:15pm UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587/8 "2021-02-27T13:15:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MyTrueName](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mytruename/32/41229_2.png) [@MyTrueName](https://forum.freecodecamp.org/u/MyTrueName)\
**Post date:** [February 27, 2021, 2:49pm UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587/9 "2021-02-27T14:49:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![makamo66](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/makamo66/32/126398_2.png) [@makamo66](https://forum.freecodecamp.org/u/makamo66)\
**Post date:** [February 27, 2021, 3:02pm UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587/10 "2021-02-27T15:02:24Z")

</div>

let can change values and const remains just the initialized value

---

<div class="post-metadata">

**Author:** ![MyTrueName](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mytruename/32/41229_2.png) [@MyTrueName](https://forum.freecodecamp.org/u/MyTrueName)\
**Post date:** [February 27, 2021, 3:16pm UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587/11 "2021-02-27T15:16:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [August 29, 2021, 3:17am UTC](https://forum.freecodecamp.org/t/i-want-the-style-to-persist/448587/12 "2021-08-29T03:17:00Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.