Adding multiple HTML elements in a javascript loop

Question

I am trying to add multiple elements in a page through a loop in javascript but the code is not running can someone please point out what is wrong

<body>
<script type="text/javascript">
function gengrid()
      {
          var i=0;
          var num_stud=8;
          var newdiv;
          var divIdName;
          for(i=1;i<=num_stud;i++)
          {
             newdiv = document.createElement('div');
             divIdName = '50'+i;
             newdiv.setAttribute('id',divIdName);
             newdiv.innerHTML ='<img src=50'+i+'.jpg alt="a"></img>';
             document.body.appendChild(newdiv);
          }
      }
  </script>

Define "not running"? Do you get an error message? Or does it just not behave the way you expect? Can you put your code up in a fiddle? — Matt Burland
– Matt Burland, Commented Sep 9, 2013 at 17:34
id's are not allowed to start with a number. Thank may be what is causing your problem, but even if it isn't, you need to change that. — Jordan
– Jordan, Commented Sep 9, 2013 at 17:36
You also forgot to properly quote the value of the src attribute of your img tag. Furthermore the img tag should be self-closing, i.e. <img src="whatever.jpg" alt="a" />. — Bart
– Bart, Commented Sep 9, 2013 at 17:48

Cymen · Accepted Answer · 2013-09-09 17:35:51Z

2

You have defined a function named gengrid but are not running it. Below the definition of the function, try putting gengrid();.

answered Sep 9, 2013 at 17:35

Cymen

14.5k4 gold badges58 silver badges77 bronze badges

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

Comments

Ericksan Pimentel · Accepted Answer · 2023-02-15 16:00:30Z

1

I have tested the following code out and it works.

here is a Plunker link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Manipulation</title>
</head>
<body>
<script type="text/javascript">
    function gengrid()
    {
        let num_stud=8;
        let newdiv;
        let divIdName;
        for(let i=1; i<=num_stud; i++)
        {
            newdiv = document.createElement('div');
            divIdName = '50'+i;
            newdiv.setAttribute('id',divIdName);
            newdiv.innerHTML ='<div id="box'+i+'">Testing 123</div>';
            document.body.appendChild(newdiv);
        }
    }
    window.onload = function () {
        gengrid();
    }
</script>


</body>
</html>

Hope this helps!

edited Feb 15, 2023 at 16:00

Ericksan Pimentel

1822 silver badges11 bronze badges

answered Jun 14, 2016 at 13:41

Tim

1,8962 gold badges28 silver badges48 bronze badges

Comments

Ericksan Pimentel · Accepted Answer · 2023-02-13 14:09:15Z

0

If so, be useful to anyone else. I need to create a 4x4 matrix using the canvas tag. To organize it in the right order I put it like this.

let canvas;
let div;

for (let line = 0; line < 4; line += 1) {
  div = document.createElement('div');
  for (let column = 0; column < 4; column += 1) {
    canvas = document.createElement('canvas');
    canvas.style.cssText = `
    width: 65px;
    height: 60px;
    border: 1px;
    border-color: black;
    border-style: solid;
    background-color: white;
    margin: 5px;
    `;
    canvas.setAttribute('id', `pallet-${column}.${line}`);
    div.appendChild(canvas);
  }
  main.appendChild(div);
}

answered Feb 13, 2023 at 14:09

Ericksan Pimentel

1822 silver badges11 bronze badges

Collectives™ on Stack Overflow

Adding multiple HTML elements in a javascript loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related