Javascript: присвоение идентификатора кнопки в качестве номера внутри innerhtml

Question

У меня есть эта проблема, где я не могу представить число «xq» в качестве идентификатора для кнопок при использовании innerHTML. Вот код:

for (var xq = 0; xq < 3; xq++) { 
    var pass = xq; 
    tabletextvar = '<button id="buttontexto"; onclick="cancelObject(this.id);">Button</button>' 
    document.getElementById("buttontexto").innerHTML = pass; 
} 

document.getElementById("tabletext").innerHTML = tabletextvar; 

Кнопка ID заканчивается время «buttontexto», когда я действительно хочу, чтобы это было то, что innerHTML. Возможно, у вас не может быть другого innerHTML внутри innerHTML. Приняты любые советы или исправления.

Answer 1

Если вы хотите иметь 3 кнопки с идентификаторами 1,2 и 3, то вам нужно добавить их, просто используя переменную внутри цикла, она переопределит ее, и когда цикл закончится, будет иметь последнее значение. Вы должны иметь конкатенированную строку.

var buttons = []; 
for (var xq = 0; xq < 3; xq++) { 
    buttons.push('<button id="',xq,'" onclick="cancelObject(this.id);">',xq,"</button>") 
} 

document.getElementById("tabletext").innerHTML = buttons.join(''); 

Демо: Fiddle