Passing class name into function parameter

Question

Im working with this part of code:

<div class="tabs-buttons-container">
            <button class="tabs-button" onclick="openTabs(event, 'test11', 'red')">Tab 1</button>
            <button class="tabs-button" onclick="openTabs(event, 'test12')">Tab 2</button>
            <button class="tabs-button" onclick="openTabs(event, 'test13')">Tab 3</button>
            <span class="test"></span>
            <span class="red"></span>
            <span class="white"></span>
        </div>

const openTabs = (event, tab, test) => {
    let i, tabContent, tabButton;

    tabContent = document.getElementsByClassName("tabs-content")

    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    document.getElementById(tab).style.display = "block";
    document.getElementsByClassName(test).style.display = "block";
}

My current goal is to pass class "red" into function and change the display of span element. When im using ID it works fine but when i want to pass class the result is null. Is this possible to dynamically pass class name inside JS function?

ariel · Accepted Answer · 2020-03-28 20:00:37Z

1

getElementsByClassName return a collection, so you need to go through each element to assign the style. You can also use querySelector("." + className) which return only the first matched element.

answered Mar 28, 2020 at 20:00

ariel

16.2k13 gold badges65 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maddness Over a year ago

Oh i've totaly forgot about that. Thank you!

double-beep · Accepted Answer · 2020-03-29 16:37:09Z

0

var red = document.getElementByClassName('red')[0];

edited Mar 29, 2020 at 16:37

double-beep

5,66019 gold badges43 silver badges50 bronze badges

answered Mar 28, 2020 at 21:21

Dusan R

172 bronze badges

2 Comments

Suraj Kumar Over a year ago

Code only answers can almost always be improved by the addition of some explanation of how and why they work?

double-beep Over a year ago

Welcome to Stack Overflow! While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. From Review

Collectives™ on Stack Overflow

Passing class name into function parameter

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related