Difficulty with javascript. Please help

1

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

<ul>                   
<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>
</ul>

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.

2

can your show the whole code?

3

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

4

Codepen link

5

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

6

work
you should check this,it work.

1 Like
7

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”

8

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?