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

Question

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

Answer 1

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 - eg, you might at least want to check if there's any active tab at all.

Answer 2

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>

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

Question

2 answers

solution1
1 2021-04-05 19:53:32

solution2
0 2021-04-05 19:54:28

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

Question

2 answers

solution1 1 2021-04-05 19:53:32

solution2 0 2021-04-05 19:54:28

solution1
1 2021-04-05 19:53:32

solution2
0 2021-04-05 19:54:28