CODEWITHSUNDEEP
javascripthtml
Jabid Hasan
Jabid Hasan

Reputation: 19

find() method is not working in my vanilla javascript project

I have been working on a vanilla javascript project.

Here this line const tempPage = sublinks.find(({ page }) => page === text); is logging as undefined on the console.


const sublinks = [
  {
    page: 'products',
    links: [
      { label: 'payment', icon: 'fas fa-credit-card', url: 'products.html' },
      { label: 'terminal', icon: 'fas fa-credit-card', url: 'products.html' },
      { label: 'connect', icon: 'fas fa-credit-card', url: 'products.html' },
    ],
  },
  {
    page: 'developers',
    links: [
      { label: 'plugins', icon: 'fas fa-book', url: 'products.html' },
      { label: 'libraries', icon: 'fas fa-book', url: 'products.html' },
      { label: 'plugins', icon: 'fas fa-book', url: 'products.html' },
      { label: 'billing', icon: 'fas fa-book', url: 'products.html' },
    ],
  },
  {
    page: 'company',
    links: [
      { label: 'about', icon: 'fas fa-briefcase', url: 'products.html' },
      { label: 'customers', icon: 'fas fa-briefcase', url: 'products.html' },
    ],
  },
];

const submenu = document.querySelector('.submenu');
const linkBtns = [...document.querySelectorAll('.link-btn')];

linkBtns.forEach((btn) => {
    btn.addEventListener('mouseover', e => {
        const text = e.currentTarget.textContent;
        const tempBtn = e.currentTarget.getBoundingClientRect();
        const center = (tempBtn.left + tempBtn.right) / 2;
        const bottom = tempBtn.bottom - 3;

        // ***********this line**************************
        const tempPage = sublinks.find(({ page }) => page === text);
        // ******************************************************
        console.log(tempPage);
        
        submenu.classList.add('show');
        submenu.style.left = `${center}px`;
        submenu.style.top = `${bottom}px`;
    })
});

here is the HTML code.

<ul class="nav-links">
          <li>
            <button class="link-btn">Products</button>
          </li>
          <li>
            <button class="link-btn">Developers</button>
          </li>
          <li>
            <button class="link-btn">Company</button>
          </li>
        </ul>

<aside class="submenu">
      hello there
    </aside>

Upvotes: 0

Views: 67

Answers (2)

Julius Guevarra
Julius Guevarra

Reputation: 898

You should transform the text to lowercase page === text.toLowerCase() since all the text nodes of the button are all capitalized resulting to return false on every iteration of your find() method

Upvotes: 1

Ken Nguyen
Ken Nguyen

Reputation: 158

In your HTML:

<button class="link-btn">Products</button>

So in your Javascript code:

const tempPage = sublinks.find(({ page }) => page === text)

"page" will be "products", and "text" will be "Products"

You can change it to

const tempPage = sublinks.find(({ page }) => page === text.toLowerCase())

Upvotes: 1

Related Questions