CODEWITHSUNDEEP
javascripthtmljquery
A P
A P

Reputation: 75

Images in dynamic divs not displayed

I am looping through images and create dynamic divs. But the images are not displayed, though console.log() shows that parameters of ready() function in the loop are valid. It shows myDiv1 and address of the first image in the array and myDiv2 and address of the second image. What's wrong with the code?

Here's my code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="view_topic.css">
</head>

<body>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<div id="outerdiv"></div>
<script>

$(document).ready(function() {
    $('#outerdiv').append(
    $('<div>').prop({
    id: 'myDiv1',
    //innerHTML: 'Hi there!',
    className: 'img-wrapper'
    })
    );
});

$(document).ready(function() {
    $('#outerdiv').append(
    $('<div>').prop({
    id: 'myDiv2',
    //innerHTML: 'Hi there!',
    className: 'img-wrapper'
    })
    );
});
$(this).css('height',"100px");

var get_a_image = ["http://iancaple.ru/upload/images/20200804_225812.jpg", "http://iancaple.ru/upload/images/8871677_tsumpy_laba_3.docx"];
var counter = 1;
var ready_cnt = 0;

for (var i = 0; i < 2; i++)  {
  $(document).ready(function() {
    $('#myDiv' + ready_cnt + 1).append($('<img id="theImg2">').attr({
    'src': get_a_image[ready_cnt] , //'https://' + imgUrl ,
    'alt': 'test image ' + ready_cnt + 1
    })
    ).scrollTop(9999)
    console.log("get_a_image[" + ready_cnt + "]=" + get_a_image[ready_cnt]);
    console.log('#myDiv' + (ready_cnt + 1));
    ready_cnt++;

  });
}
</script>
    
</body>
<html>

Upvotes: 3

Views: 55

Answers (1)

wangdev87
wangdev87

Reputation: 8751

Use parentheses to get the increased value of ready_cnt. If not, it will be regarded to select an ID of myDiv01

$('#myDiv' + (ready_cnt + 1)).append(...)

Upvotes: 1

Related Questions