For Loop in JavaScript is not working correctly

Question

const box = document.querySelectorAll(".box");
console.log(box.length);

const direction = [
  "top-start",
  "bottom-start",
  "left-start",
  "right-start",
  "top-center",
  "bottom-center",
  "left-center",
  "right-center",
  "top-end",
  "bottom-end",
  "left-end",
  "right-end"
];

box.forEach((el, index) => {
  for (let i = 0; i < direction.length; i++) {
    CreateTooltip(el, direction[index], "Hello, World!");
  }
});

The above mentioned code rendering 144 tooltips in DOM and I want only 12 with each should have different directions. I don't why this loop is not working! I tried to add forEach loop inside for loop but still the problem is same.

NOTE As some of you asked I pasted my entire code. Hope it will help you and then you will help me. 😅

Well, you're creating and appending a new DIV element for each call, what did you expect to get? it will be 144 since you have 12 .box elements and 12 directions. — Pezhvak
– Pezhvak, Commented Jul 18, 2021 at 19:17
@Pezhvak how can I solve this problem?? I am not a pro in JavaScript! — Kunal Tanwar
– Kunal Tanwar, Commented Jul 18, 2021 at 19:19
box.forEach((element, index) => { CreateTooltip(element, direction[index], 'Hello, World!'); }) use this code for creating tooltip — Midhun
– Midhun, Commented Jul 18, 2021 at 19:21
@Flames Thank You So Much!! it worked. If you want tooltips for any project remember me! — Kunal Tanwar
– Kunal Tanwar, Commented Jul 18, 2021 at 19:23

Thomas · Accepted Answer · 2021-07-18 19:03:19Z

2

You can pass in the index of each element like this and get the corresponding value from the direction array

box.forEach((element, index) => {  
        CreateTooltip(element, direction[index], 'Hello, World!');
})

answered Jul 18, 2021 at 19:03

Thomas

1771 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kunal Tanwar Over a year ago

Your code partially worked but I am still getting 144 element rendered in DOM! and I want only 12.

Thomas Over a year ago

I think the problem might be with the CreateTooltip function, could you share the code for it?

foundling Over a year ago

This looks like a perfectly valid solution assuming the length of box is equal to the length of direction. Seems like the bug might be in your CreateTooltip function.

Dharman · Accepted Answer · 2021-07-18 19:19:42Z

1

Your code is working well, as you are iterating over list of boxes and inside that you have another iteration, so the result of your code will always be (number of boxes)*(number of directions) = 144..

So you can Iterate only on boxes or on direction by manipulating one and other lists by there index numbers as given below..

    $(box).each(function(i,v){console.log(direction[i])})

edited Jul 18, 2021 at 19:19

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jul 18, 2021 at 19:13

Mohsin Ali Khan

112 bronze badges

1 Comment

Kunal Tanwar Over a year ago

Thanks but I don't use jQuery. Really appreciate though. 👍🚀

Gracie williams · Accepted Answer · 2021-07-18 18:57:20Z

0

If you are using Queryselectorall , if it is class use dot , or if you are using id use #

const box = document.querySelectorAll('.box');

answered Jul 18, 2021 at 18:57

Gracie williams

1,1452 gold badges25 silver badges63 bronze badges

1 Comment

Kunal Tanwar Over a year ago

it is not about naming error I am having problem in rendering!

Pezhvak · Accepted Answer · 2021-07-18 19:10:16Z

0

From what you have stated, namely wanting 12 tooltips (same as direction index counts) but getting 144 tooltips (144/12 = 12) you should have 12 elements with .box class in your page. the problem is in your query selection.

const box = document.querySelectorAll('.box');
console.log(box.length); // this should show 12

what you need to do is to set an ID for your element or create a loop for the box (array at this point) and execute your CreateTooltip logic for each of them separately.

Note: I suggest you to test your CreateTooltip in a testing environment (separated file created to test your code) with only one .box element, it's possible that the library you're using does not support multiple calls of CreateTooltip for a single element, that might be the reason you're getting 144 elements instead of 12.

edited Jul 18, 2021 at 19:10

answered Jul 18, 2021 at 19:04

Pezhvak

11.1k7 gold badges32 silver badges44 bronze badges

1 Comment

Kunal Tanwar Over a year ago

I think I should mention my entire code! Let me do it real quick. Then please tell me what is the actual problem!!

Collectives™ on Stack Overflow

For Loop in JavaScript is not working correctly

4 Answers 4

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related