Estoy tratando de aplicar la misma clase css a cada entrada individual en la matriz creada, pero en cambio, la estoy aplicando una vez a toda la matriz.
Mi código es el siguiente ..
function sortballhistory() { var str = document.getElementById("ballhistory").innerText; var temp = new Array(); // This will return an array with strings "1", "2", etc. temp = str.split(","); temp.sort(function (a, b) { return a - b; }); temp = 'temp.slice(1); document.getElementById('ballhistorysortedarr').innerHTML = temp; };ballhistory innerText contiene números aleatorios del 1 al 90 como (2, 5, 7, 76, etc.), estos cambian cada vez que se carga una página.
he probado 1)
temp = '<span class="smallball">' + temp.slice(1) + '</span>'; document.getElementById('ballhistorysortedarr').innerHTML = temp;y también probé 2)
document.getElementById('ballhistorysortedarr').innerHTML = '<span class="smallball">' + temp; + '</span>';y también 3)
document.getElementById('ballhistorysortedarr').innerHTML += '<span class="smallball">' + temp; + '</span>';Pero ninguno de ellos da el resultado deseado de diseñar cada entrada por separado.
Debe iterar a través de cada elemento en la matriz temporal y devolver el elemento envuelto dentro del intervalo. Así es como puede proporcionar la clase al intervalo. Verifique el código a continuación y hágame saber si esto es lo que estaba tratando de lograr.
var btn = document.getElementById("btn"); btn.addEventListener('click', function() { sortballhistory(); }) function sortballhistory() { var str = document.getElementById("ballhistory").innerText; var temp = new Array(); // This will return an array with strings "1", "2", etc. temp = str.split(","); temp.sort(function (a, b) { return a - b; }); var result = ''; for(var i=0; i<temp.length; i++) { result+="<span class='item'>" + temp[i] + "</span>" } document.getElementById('ballhistorysortedarr').innerHTML = result; }; .item { color: red; } <div id="ballhistory">2, 3, 5,4, 6, 2, 5, 1, 8, 4</div> <button id='btn'>Click</button> <div id='ballhistorysortedarr'></div>