Variable data attribute not working

Question

I have this code:

for(var i = 0; i < subjects.length; i++){
$('#container').append('<div class="content"><span class="context-text" data-item="' + i '">' + subject[i].title + '</span></div>');
}

It is not working. This does work:

for(var i = 0; i < subjects.length; i++){
$('#container').append('<div class="content"><span class="context-text" data-item="1">' + subject[i].title + '</span></div>');
}

Can anybody help? I am missing something and I don't see what it is.

What is the error you are getting? Might be you have missed to add one `+` sign. Here `data-item="' + i '"`. — Samir, Jan 06 '17 at 10:09
You're missing a `+` after `i`. Also note that you loop through `subjects` but attempt to access `subject` within the loop. Voting to close as both problems are just typos — Rory McCrossan, Jan 06 '17 at 10:10
In fact JavaScript does not work at all. Usually that is the case when there is a syntax-error. But I can't find any. When I replace ' + i' by 1 it works perfectly. — johannes, Jan 06 '17 at 10:10
For future reference always check the console when debugging JS code. You would have seen a syntax error in this case — Rory McCrossan, Jan 06 '17 at 10:11

score 1 · Accepted Answer · answered Jan 06 '17 at 10:10

1

Missed + after i

Change this line

$('#container').append('<div class="content"><span class="context-text" data-item="' + i '">' + subject[i].title + '</span></div>');

to

$('#container').append('<div class="content"><span class="context-text" data-item="' + i + '">' + subject[i].title + '</span></div>');

answered Jan 06 '17 at 10:10

Kiran Shinde

5,732
4
24
41

Thank you Kenny, I have been staring at it for at least an hour. – johannes Jan 06 '17 at 10:12

Variable data attribute not working

1 Answers1