For loop inside my custom function doesn't work

Question

I'm trying to create a function that uses the number input I got from users to create the same amount of division inside of a container division.However, no matter what the number is, it always creates only 1 div. It seems like the for loop inside my function is being avoided.

I've tried to alter the function, checked number input whether it is defined or undefined.

function createGrid(parameter) {
  for (i = 0; i < parameter * parameter; i++); {
    const div = document.createElement('div');
    newDiv = container.appendChild(div);
    newDiv.setAttribute('class', 'newDiv');
  }
  return newDiv;
}

Container is the id of my main division. I am trying to create divisions inside of this container division. That is why I'm using appendChild. — tosyn
– tosyn, Commented Sep 11, 2019 at 15:51
Your code doesn't really make sense. const div is a new div you create. In the next line, you (re-)declare a global variable newDiv and set it to be container. Where is container defined? Then you apply the newDiv class to the container over and over again. — André Reichelt
– André Reichelt, Commented Sep 11, 2019 at 15:51

Nikhil · Accepted Answer · 2019-09-11 15:51:37Z

9

You have semicolon ; after for loop which is essentially an empty statement.

That is the reason the for loop is not working as expected, and rest of your code is just creating one divider.

Remove the semicolon ; to fix the issue.

answered Sep 11, 2019 at 15:51

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

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

1 Comment

Lee Taylor Over a year ago

@tosyn Then please mark this answer as the solution.

André Reichelt · Accepted Answer · 2019-09-11 16:00:53Z

Additional to Nikhil's answer, here is how I would write it (without using global variables, which is considered to be bad practice in most cases):

function createGrid(parameter) {
  let newDiv;
  for (let i = 0; i < parameter * parameter; i++) {
    newDiv = document.createElement('div');
    newDiv.setAttribute('class', 'newDiv');
    container.appendChild(newDiv);
  }
  return newDiv;
}

If you don't need to return the last div added, just remove the let newDiv; line and put the const keyword back into the first line of the for loop. Also remove the return value then.

function createGrid(parameter) {
  for (let i = 0; i < parameter * parameter; i++) {
    const newDiv = document.createElement('div');
    newDiv.setAttribute('class', 'newDiv');
    container.appendChild(newDiv);
  }
}

Collectives™ on Stack Overflow

For loop inside my custom function doesn't work

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related