Why remove is not working in my code

1 
<div class="tab-contents active-tab">
                        <!-----------skills details------->
                        <ul class="skills ">
                            <li><i class="fa-brands fa-html5 " style="color: #ec3022; "></i><br>HTML</li>
</ul>
</div>
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementByClassName("tab-contents");

function opentab(tabname)
{
    for(let tablink of tablinks){
        tablink.classList.remove("active-links");
    }
    for(let tabcontent of tabcontents){
        tabcontent.classList.remove("active-tab");

    }
}

Hello !above is my code I am trying to remove html content its removing (“active-links”) class but tabcontents are not removing can somebody help me to resolve this issue

2

Hello there

I have edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

As for your issue:

Hope this helps

2 Likes
3

Hello there.

You need to use event listeners to manipulate the dom when using vanilla JavaScript.

var tabLinks = document.getElementsByClassName("tab-links");
var tabContents = document.getElementsByClassName("tab-contents");

tabLinks.forEach((link) => {
     link.addEventListener('click', (event) => {
          event.target.classList.add('active-link')
          
          foreach(tabLink in tabLink) {
                tabLink.classList.remove('active-link')
          }
     })
});

I have no tested this, but you can see how is the implementation.

1 Like
4

thanks for your response .would u tell why we use
event.currentTarget

5

I am trying to add it through html tag

<p class="tab-links active-links" onclick=opentab(tabname)>

would you help me in this

6

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