动态选项卡不显示内容 Javascript

Question

Currently I have 6 tabs that are dynamically populated from the Post Categories in Wordpress. https://nationalvip.pixl.work/webinars/

When I click each of them they should be displaying the posts belonging to that category selected.

Problem is If I click any of them the one selected doesn't show the anything.

here is my javascript code (which i took it from here: W3 Schools :

function openCity(evt, cityName) {

    var i, tabcontent, tablinks;

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

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

I've done some tests, and found that the "active" class is not added to the selected tab. Although this same code works on codepen here: CODEPEN

You can see my current demo here: https://nationalvip.pixl.work/webinars/

I really appreciate your help. Thanks

Answer 1

Just in case it helps someone with same issue:

the problem was this line: document.getElementById(cityName).style.display = "block";

I updated that line with this one: cityName.style.display = "block";

we need to use the value received on the cityName which contain the ID of the block to be displayed.