将类名传递给函数参数

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?

Answer 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.

Answer 2

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