Difficulty with javascript. Please help

I have three anchor tags. Now I wanna add another function which will add a new class to the one which is clicked.

HTML code below

<li><a href="#" id="one" onclick="smoothScroll(document.getElementById('secondSection'));addClass(this.id);">About</a></li>
<li><a href="#" id="two" onclick="smoothScroll(document.getElementById('thirdSection'));addClass(this.id);">Portfolio</a></li>
<li><a href="#" id="three" onclick="smoothScroll(document.getElementById('forthSection'));addClass(this.id);">Contact</a></li>

And below is my javascript

function changeClass(clicked_id) { document.getElementById('clicked_id').setAttribute("class", "active"); }

But this does not work, what is the problem?
Appreciate any help.

can your show the whole code?

This will get the element with the id 'clicked_id', not the id in clicked_id. Remove the quotes and it should work.

Codepen link

It didn’t make any changes, didn’t work

you should check this,it work.

1 Like

you have two mistake.
first,the function named smoothScroll is undefined,it cause the following code can not work.
second,there is no id attribute in “li” tag,so “this.id” is null,you should pass this into the “addClass”

But what if one link is active and if the another one is clicked and turned active too than how can I make the first one be removed of active class?