Javascript passing info from one function to another

Question

I've created a JS function that hides a certain amount of breadcrumbs if there are too many. They are replaced by a button (ellipsis), when you click the button the hidden breadcrumbs are revealed.

The Problem: I loop through the breadcrumbs to see if there are enough to hide. If there are I hide them. But I can't figure out how to then call the code to create the button. If I call the button code in the loop I get more than 1 button generated.

Right now the button will always appear whether there are enough breadcrumbs to hide or not.

In my mind, I would have the for loop with the if statement return true to what would then be the button function. But I can't figure out how to do this. Please offer any pointers for restructuring this code if you can.

Here's a Codepen: https://codepen.io/sibarad/pen/GRvpEbp

Basic HTML:

<nav aria-label="breadcrumb">
   <ol class="c-breadcrumb mb-7 md:mb-8">
      <li class="c-breadcrumb-item">
         <a href="/#" class="c-link">Breadcrumb 1</a>
      </li>
      <li class="c-breadcrumb-item">
         <a href="#" class="c-link">Breadcrumb 2</a>
      </li>
      <li class="c-breadcrumb-item">
         <a href="#" class="c-link">Longer Breadcrumb Name 03</a>
      </li>
   </ol>
</nav>

Javascript:

function breadcrumb() {
    // Target specific breadcrumbs, not 1st or last 2
    let hiddenbreadcrumb = document.querySelectorAll('.c-breadcrumb-item:nth-child(1n+2):nth-last-child(n+3)');

    // Loop through select breadcrumbs, if length is greater than x hide them.
    for (var i = 0; i < hiddenbreadcrumb.length; i++) {
        if(hiddenbreadcrumb.length >= 3) {
            hiddenbreadcrumb[i].style.display = "none";
        }
    }

    // This would be the button function, but I don't know how to engage this only if the if statement above was met.
    let li = document.createElement('li');
        li.className = 'c-breadcrumb-item';
    let ellipbutton = document.createElement('button');
        ellipbutton.type = 'button';
        ellipbutton.innerHTML = '...';
        ellipbutton.className = 'c-breadcrumb_btn u-btn-clear';

    ellipbutton.onclick = function() {
        console.log("clicked");
        for (var i = 0; i < hiddenbreadcrumb.length; i++) {
            hiddenbreadcrumb[i].style.display = "flex";
        }
        li.style.display = "none";
    };

    li.appendChild(ellipbutton);

    let container = document.querySelector('.c-breadcrumb-item:first-child');

    container.insertAdjacentElement("afterend", li);
}

breadcrumb();

Answer 1

We can refactor your code slightly to achieve this - the if statement which checks whether there are more than 3 breadcrumbs doesn't need to be inside the for loop - it's redundant to keep checking the same value multiple times.

If we move that outside the loop then it can

a) prevent unnecessary looping when there aren't enough breadcrumbs, and

b) wrap around the button creation code as well, which should solve your problem.

For example:

if (hiddenbreadcrumb.length >= 3) {

    for (var i = 0; i < hiddenbreadcrumb.length; i++) {
        hiddenbreadcrumb[i].style.display = "none";
    }

    let li = document.createElement('li');
    li.className = 'c-breadcrumb-item';

    let ellipbutton = document.createElement('button');
    ellipbutton.type = 'button';
    ellipbutton.innerHTML = '...';
    ellipbutton.className = 'c-breadcrumb_btn u-btn-clear';

    ellipbutton.onclick = function() {
        console.log("clicked");
        for (var i = 0; i < hiddenbreadcrumb.length; i++) {
            hiddenbreadcrumb[i].style.display = "flex";
        }
        li.style.display = "none";
    };

    let container = document.querySelector('.c-breadcrumb-item:first-child');
    container.insertAdjacentElement("afterend", li);
}

Answer 2

It looks like some small initialization issues. This should correct it:

Change this:

let hiddenbreadcrumb = document.querySelectorAll('.c-breadcrumb-item:nth-child(1n+2):nth-last-child(n+3)');

// Loop through select breadcrumbs, if length is greater than x hide them.
for (var i = 0; i < hiddenbreadcrumb.length; i++) {
  if(hiddenbreadcrumb.length >= 3) {
    hiddenbreadcrumb[i].style.display = "none";
  }
}

to this:

let hiddenbreadcrumb = document.querySelectorAll('.c-breadcrumb-item');
if(hiddenbreadcrumb.length < 3)
  return
for (var i = 1; i < hiddenbreadcrumb.length - 1; i++) {
  hiddenbreadcrumb[i].style.display = "none";
}

Answer 3

Try this... it allows 3 li items as item1 ... item2ndLast, itemLast

(function () {
  "use strict";

  function breadcrumb() {
    
    let hiddenbreadcrumb = document.querySelectorAll(".c-breadcrumb-item:nth-child(1n+2)");
    
    if (hiddenbreadcrumb.length <= 3) return;
    for (var i = 1; i < hiddenbreadcrumb.length - 1; i++) {
      hiddenbreadcrumb[i].style.display = "none";
    }

    let li = document.createElement("li");
    li.className = "c-breadcrumb-item";
    let ellipbutton = document.createElement("button");
    ellipbutton.type = "button";
    ellipbutton.innerHTML = "...";
    ellipbutton.className = "c-breadcrumb_btn u-btn-clear";

    ellipbutton.onclick = function () {
      console.log("clicked");
      for (var i = 0; i < hiddenbreadcrumb.length; i++) {
        hiddenbreadcrumb[i].style.display = "flex";
      }
      li.style.display = "none";
    };

    li.appendChild(ellipbutton);

    let container = document.querySelector(".c-breadcrumb-item:first-child");

    container.insertAdjacentElement("afterend", li);
  }

  breadcrumb();
})();