Reputation: 1177

how to get the active tab id to be able to use it in javascript

I have a website that has 4 tabs that each tab will show different data.

See my website with suggested changes from first answer. I also added some more details how my website is setup:

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script>
...other code
</script>

<h2>Measurements - graphs</h2>

<?php
... other php code
?>

<script>
var openedTabId = document.getElementsByClassName("opened")[0].getAttribute('id');
console.log(openedTabId);
if (tabId == "tab1") {
    // show data only for client1
} else if (tabId == "tab2") {
    // show data only for client2
}
// do other stuff
</script>

<style>
    /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }
    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }
    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }
    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    } 
</style>

</head>

<body>
    <div class="tab">
        <button class="tablink" onclick="openTab('tab1', this, 'red')" id="defaultOpen">Client1</button>
        <button class="tablink" onclick="openTab('tab2', this, 'green')">Client2</button>
        <button class="tablink" onclick="openTab('tab3', this, 'blue')">Client3</button>
        <button class="tablink" onclick="openTab('tab4', this, 'orange')">Client4</button>
    </div>
    <!-- Tab content -->
    <div id="tab1" class="tabcontent">
        <p>Data from Client1</p>
    <div id="tab2" class="tabcontent">
        <p>Data from Client2</p>
    </div>
    <div id="tab3" class="tabcontent">
        <p>Data from Client3</p>
    </div>
    <div id="tab4" class="tabcontent">
        <p>Data from Client4</p>
    </div>

<script>
    function openTab(tabName,elmnt,color) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.backgroundColor = "";
        }
        document.getElementById(tabName).style.display = "block";
        document.getElementById(tabName).classList.add("opened");
        elmnt.style.backgroundColor = color;
    }
    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
    document.getElementById("defaultOpen").classList.add("opened");
</script>

</body>
</html>

When I view this site I am getting a this error, which correspond to the line above where I am trying to set var openedTabId:

ERROR - Uncaught TypeError: document.getElementsByClassName(...)[0] is undefined

The script to support the tabs is, without the suggested changes:

<script>
function openTab(tabName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(tabName).style.display = "block";
  elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

I have updated with more details, as specially the website setup, because it seems that somehow the elements are not globally accessible at any point of the website or at least I don't know how to do it.

Updated function openTab() to printout which tab is opened, but it seems that the function has an issue or!? Although I switch tab it always shows tab1!?

function openTab(tabName,elmnt,color) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    document.getElementById(tabName).style.display = "block";
    document.getElementById(tabName).classList.add("opened");
    window.tabId = document.getElementsByClassName("opened")[0].getAttribute('id');
    console.log(window.tabId); // it always logs 'tab1' ??
    elmnt.style.backgroundColor = color;
}

How can i do this?

Thanks

Upvotes: 0

Answers (2)

Alexandru Corlan

Reputation: 83

Updated the answer to solve your problem

    function openTab(tabName,elmnt,color) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
            tabcontent[i].classList.remove('opened');
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.backgroundColor = "";
        }
        document.getElementById(tabName).style.display = "block";
        document.getElementById(tabName).classList.add("opened");
        elmnt.style.backgroundColor = color;
    }
    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
    
    
        setTimeout(function(){
        var openedTabId = document.getElementsByClassName("tabcontent opened");
        var i;
        for (i = 0; i < openedTabId.length; i++) {
            tabId = openedTabId[i].getAttribute('id');
        }
        console.log(tabId);
        if (tabId == "tab1") {
            // show data only for client1
        } else if (tabId == "tab2") {
            // show data only for client2
        }
        // do other stuff
    },500)

  /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }
    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }
    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }
    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">


<h2>Measurements - graphs</h2>

<body>
    <div class="tab">
        <button class="tablink" onclick="openTab('tab1', this, 'red')" id="defaultOpen">Client1</button>
        <button class="tablink" onclick="openTab('tab2', this, 'green')">Client2</button>
        <button class="tablink" onclick="openTab('tab3', this, 'blue')">Client3</button>
        <button class="tablink" onclick="openTab('tab4', this, 'orange')">Client4</button>
    </div>
    <!-- Tab content -->
    <div id="tab1" class="tabcontent">
        <p>Data from Client1</p>
    </div>
    <div id="tab2" class="tabcontent">
        <p>Data from Client2</p>
    </div>
    <div id="tab3" class="tabcontent">
        <p>Data from Client3</p>
    </div>
    <div id="tab4" class="tabcontent">
        <p>Data from Client4</p>
    </div>

<script>
    function openTab(tabName,elmnt,color) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
            tabcontent[i].classList.remove('opened');
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.backgroundColor = "";
        }
        document.getElementById(tabName).style.display = "block";
        document.getElementById(tabName).classList.add("opened");
        elmnt.style.backgroundColor = color;
    }
    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
</script>

</body>
</html>

Upvotes: 0

nosurs

Reputation: 665

When you open a tab, add a class to it. This way, you can identify it later on:

<script>
function openTab(tabName,elmnt,color) {
  ...
  let active = document.getElementById(tabName);

  active.style.display = "block";
  active.classList.add("active");
  ...
}
</script>

<script>
var tabId = document.getElementsByClassName('active')[0].getAttribute('id');
</script>

Just don't fortget to remove all .active classes on all tabs before opening the next one. Also, better do some error checking in the second part - e.g., you might at least want to check if there's any active tab at all.

Upvotes: 1

how to get the active tab id to be able to use it in javascript

Answers (2)

Related Questions