javascript - For loop inside my custom function doesn't work - Stack Overflow

admin管理员组

文章数量:1395779

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;
}

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;
}

• javascript
• html

Share Improve this question Follow edited Sep 11, 2019 at 15:52 Andreas 21.9k77 gold badges5151 silver badges5858 bronze badges asked Sep 11, 2019 at 15:45 tosyntosyn 5766 bronze badges 5

• 1 What's container? – j08691 Commented Sep 11, 2019 at 15:47
• Please provide a Minimal, Reproducible Example. – palaѕн Commented Sep 11, 2019 at 15:48
• 6 Remove the semicolon ; after for loop. – Nikhil Commented Sep 11, 2019 at 15:50
• 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 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 Commented Sep 11, 2019 at 15:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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);
  }
}

本文标签： javascriptFor loop inside my custom function doesn39t workStack Overflow