0

I have three tabs, but when I click on any of them, nothing happens and there is no error in the console. What is wrong?

When I click on any of .tabs-nav-item nothing happens.

function initTab(elem) {
  document.addEventListener("click", function(e) {
    if (!e.target.matches(elem + " .tabs-nav-item")) return;
    else {
      if (!e.target.classList.contains("active")) {
        findActiveElementAndRemoveIt(elem + " .tabs-nav-item");
        findActiveElementAndRemoveIt(elem + " .tab-content-item");
        e.target.classList.add("active");
        setTimeout(function() {
          var panel = document.querySelectorAll(
            elem + " .tab-content-item" + e.target.dataset.name
          );
          
          Array.prototype.forEach.call(panel, function(el) {
            el.classList.add("active");
            ckj;
          });
        }, 200);
      }
    }
  });
}

function findActiveElementAndRemoveIt(elem) {
  var elementList = document.querySelectorAll(elem);
  
  Array.prototype.forEach.call(elementList, function(e) {
    e.classList.remove("active");
  });
}

initTab(".tabs");
<div class="tabs">
  <div class="tabs-nav">
    <p class="tabs-nav-item active" data-name="profile">Profile</p>
    <p class="tabs-nav-item" data-name="messages">Messages</p>
    <p class="tabs-nav-item" data-name="settings">Settings</p>
  </div>
  <div class="tabs-content">
    <div class="profile active tab-content-item">
      <h3>Lorem</h3>
    </div>
    <div class="tab-content-item messages">
      <h3>ipsum </h3>
    </div>
    <div class="tab-content-item settings">
      <h3>sit amet.</h3>
    </div>
  </div>
</div>
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
rateb habedy
  • 1
  • 2
  • 1
    The dev tools provide an **Inspector** / **Elements** tab. Inspect your elements. Something _does_ happen: the `active` class correctly changes. `+ e.target.dataset.name` is just wrong. You forgot a `" ."` before that. `console.log(panel)` or `console.log(elem + " .tab-content-item" + e.target.dataset.name)` would reveal that immediately. Try using your browser’s [debug capabilities](//ali-dev.medium.com/how-to-easily-debug-in-javascript-5bac70f94f1a). See [What is a debugger and how can it help me diagnose problems?](/q/25385173/4642212). – Sebastian Simon Dec 19 '22 at 21:12
  • `elem + " .tab-content-item" + e.target.dataset.name` - returns wrong select, that's why it's not working – Konrad Dec 19 '22 at 21:19
  • That's right, I missed "." Thank you alot :) – rateb habedy Dec 19 '22 at 21:55

1 Answers1

0

I think that you have problem in the selector inside setTimeout function. I have made it work using data attributes

function initTab(elem) {
        document.addEventListener("click", function (e) {
            if (!e.target.matches(elem + " .tabs-nav-item")) return;
            else {
                if (!e.target.classList.contains("active")) {
                    findActiveElementAndRemoveIt(elem + " .tabs-nav-item");
                    findActiveElementAndRemoveIt(elem + " .tab-content-item");
                    e.target.classList.add("active")
                    setTimeout(function () {
                        var panel = document.querySelectorAll(".tab-content-item[data-name=" + e.target.dataset.name + "]");

                        Array.prototype.forEach.call(panel, function (el) {
                            el.classList.add("active");
                        });
                    }, 200);
                }
            }
        });
    }

    function findActiveElementAndRemoveIt(elem) {
        var elementList = document.querySelectorAll(elem);

        Array.prototype.forEach.call(elementList, function (e) {
            e.classList.remove("active");
        });
    }

    initTab(".tabs");
    .tabs-nav {
        display: flex;
        gap: 16px;
    }

    .tabs-nav-item {
        cursor: pointer;
    }

    .tabs-nav .active {
        font-weight: bold;
    }

    .tabs-content .tab-content-item {
        display: none;
    }

    .tabs-content .active {
        display: block;
    }
<div class="tabs">
        <div class="tabs-nav">
            <p class="tabs-nav-item active" data-name="profile">Profile</p>
            <p class="tabs-nav-item" data-name="messages">Messages</p>
            <p class="tabs-nav-item" data-name="settings">Settings</p>
        </div>
        <div class="tabs-content">
            <div class="active tab-content-item" data-name="profile">
                <h3>Lorem</h3>
            </div>
            <div class="tab-content-item" data-name="messages">
                <h3>ipsum </h3>
            </div>
            <div class="tab-content-item" data-name="settings">
                <h3>sit amet.</h3>
            </div>
        </div>
    </div>

I hope that this will help is you didn't solve the issue yet. Just Run the code snippet to see the result.

Zaki
  • 11
  • 1
  • 4