Why the if statement is not running in forEach function in Javascript?

Question

I have been working on tooltips and for that I created a javascript function Tooltip() in which I selected all the DOM elements like const targets = document.querySelectorAll('*') and after selecting all the elements, I addedforEach function on targets variable and inside for each function I created an if statement in which I checked if an element contains the specific attribute I mentioned in requiredAttrs array but it is not working somehow! And I don't know where I'm doing wrong.

COMPLETE CODE

function Tooltip() {
      const requiredAttrs = ['data-tooltip', 'data-tooltip-position', 'data-tooltip-content'];
      const targets = document.querySelectorAll('*');

      targets.forEach((target, index) => {
            if (target.hasAttribute(requiredAttrs[index])) {
                  console.log('Y');
            } else {
                  console.log('No');
            }
      });
}

Tooltip();

<!DOCTYPE html>
<html dir="ltr" lang="en">
      <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link rel="stylesheet" href="public/css/main.css" />
            <title>Pearl Framework</title>
      </head>
      <body class="vh-full grid-center">
            <style>
                  body {
                        background-color: #a1a1a1;
                  }

                  .box {
                        width: 100px;
                        height: 100px;
                        background-color: purple;
                  }
            </style>

            <div
                  class="box"
                  data-tooltip="true"
                  data-tooltip-position="top-center"
                  data-tooltip-content="Hello, World!"
            ></div>

            <script src="public/script/tooltip.js"></script>
      </body>
</html>

As you can see a <div class="box"></div> has all 3 attributes so if statement should run but instead else part is running.

tengbretson · Accepted Answer · 2021-07-21 20:01:42Z

The index of the targets array does not correspond to the index of the requiredAttrs array you are comparing against. You'll want something like this:

targets.forEach((target, index) => {
  const hasAttrs = requiredAttrs.every(attr => target.hasAttribute(attr));
  if (hasAttrs) {
    console.log('Y');
  } else {
    console.log('No');
  }
});

Edit:

This works because your call to querySelectorAll is capturing literally every element on the page and returning it as an array. In your forEach call you are then using the array index position of the current element we are inspecting for the presence of those attributes to check against the requiredAttrs. So likely by the time we are even iterating to the div that has the attributes you are interested in we are likely dealing with an index that is greater than the length of the requiredAttrs array, let alone the fact that we would only be checking for one of the attrs rather than all of them. My code takes the target node and calls the .every method on the requiredAttrs array to check that every single one of the required attrs is present on the target node.

While this solves the initial problem, I should note that this will likely have poor performance and is not the recommended way to find elements that have particular attributes. If you want a collection of elements that are all guaranteed to have the attributes in your array you can simply add them to your query, like this:

docmuent.querySelectorAll('*[data-tooltip][data-tooltip-position][data-tooltip-content]');

Sorry! I have been busy since then. Thanks 🚀 for this better method

karaken · Accepted Answer · 2021-07-21 19:43:04Z

0

at first, it's not correct to use index here, because it's index of targets array, and if you take a look to output of document.querySelectorAll('*') u can see, that it's also includes, html, head, and other tags,

in other words you are trying to access to requiredAttrs by index that exceed it's lenght

u have to wrap your if statement with for loop arround requiredAttrs

answered Jul 21, 2021 at 19:43

karaken

943 bronze badges

1 Comment

Kunal Tanwar Over a year ago

how can I exclude html head body style script and all elements like this any easy way to do this??

Collectives™ on Stack Overflow

Why the if statement is not running in forEach function in Javascript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related