0

I want to append num amount of img elements to the DOM, and give each image an id according to which num it is. I know I need a loop, so this is what I have so far:

window.onload = function makeImage(){
  for(i=0;i<num;i++){  
    document.getElementById('test').innerHTML="<img id='i' src='img/image.jpg'/>";
  }
};
<div id="test"></div>
m59
  • 43,214
  • 14
  • 119
  • 136
Xin Zhao
  • 1
  • 1

2 Answers2

1

Here are some code snippets and comments that should help you. Where you have id='i', it looks like you want this: '<img id="'+i+'"'. You concatenate in JavaScript using the + sign, so close your string with a quote, then concatenate, then open the string up again. It's easier to learn by breaking this up into steps. Here's the string without the value: '<img id=""' Then, you'll need to go in between the double quotes and close and open the string with single quotes, and concatenate i, so this: '+i+'. Altogether, you get '<img id="'+i+'"' 

var num = 2;
// addEventListener is better practice than onload
window.addEventListener('load', function() {
  // get the element reference before the loop (no need to repeat this)
  var testElem = document.getElementById('test');
  for(i = 0; i < num; i++) {
    // create an img element, this is better practice than using innerHTML
    var img = document.createElement('img');
    img.src = "//placehold.it/100x100";
    img.id = 'image'+i;
    testElem.appendChild(img);
  }
});
<div id="test"></div>

You could also use innerHTML by concatenating the new image as in the following example, but this has drawbacks. Read more about createElement vs innerHTML here.

var num = 2;
window.addEventListener('load', function() {
  var testElem = document.getElementById('test');
  for(i = 0; i < num; i++) {
    testElem.innerHTML+= '<img id="image'+i+'"src="//placehold.it/100x100">';
  }
});
<div id="test"></div>
Community
  • 1
  • 1
m59
  • 43,214
  • 14
  • 119
  • 136
  • i got some questions. ' – Xin Zhao Feb 28 '15 at 06:00
  • i got some questions there. in this code of '' , what's the meaning of ''//placehold.it' and "/100X100"? is it format of this sentense? – Xin Zhao Feb 28 '15 at 06:01
  • @XinZhao I don't know what you're asking. It's just a url. It's irrelevant. I just used that url for the demo. Put whatever you want. – m59 Feb 28 '15 at 06:06
  • @XinZhao If my answer solved your problem, don't forget to accept it by clicking the checkmark underneath the voting arrows to the left of the answer. Some new people don't know about that. Check out the tour if you haven't already: http://stackoverflow.com/tour Welcome to Stack Overflow! – m59 Feb 28 '15 at 06:08
  • it works. but I wanna keep image's id. for example, var num=2. – Xin Zhao Feb 28 '15 at 06:14
  • so that two pictures on this screen but different id but same picture – Xin Zhao Feb 28 '15 at 06:15
0

Problem here is you are not appending images in loop, old image just get overridden by the new one. Since you are using = operator.

document.getElementById('test').innerHTML="<img id='i' src='img/image.jpg'/>";
-----------------------------------------^

Use += instead, also you need to concat i value to get image unique ids:

var html = "";
var num = 3
for (var i = 1; num >= i; i++) {
  html += '<img src="http://www.tatwellness.com/store/image/cache/data/homewelcome/no%20image-200x200.png" id="img' + i + '"/>';
}

document.getElementById('test').innerHTML = html;
img {
  border: 1px solid grey;
  margin: 5px;
}
<div id="test"></div>