-2

I am currently trying to make a web port of the linux terminal game, greed. If you have ever played, each number has it's own unique color, an I need to replicate this in html.

I have tried to put them into <span style="color:#FF0000"> tags, though this got too laggy to run on my computer with any decent speed, using chrome.

drawGrid = function(){
drawer.innerHTML = ""
for(var i in board){
    for(var o in board[i]){
        drawer.innerHTML+="<span class='b"+board[i][o]+"'>"+board[i][o]+"</span>"
    }
    drawer.innerHTML+="<br>"
}}

board is a 2d array with numbers,drawer is the div which i am writing to and in a style tag including to style the numbers properly

Any help?

Someone Random
  • 3
  • 3
  • span style doesnt make laggy to run and it may be due to js code – Naga Sai A Feb 27 '19 at 20:14
  • when I remove the spans, it runs fine, so idk – Someone Random Feb 27 '19 at 20:24
  • Welcome to StackOverflow! Be sure to take the [tour](https://stackoverflow.com/tour) and visit the [help center](https://stackoverflow.com/help). You may want to create a [minimal complete verifiable example](https://stackoverflow.com/help/mcve) of your problem. You can't get help if your problem is not reproducible. Including the browser you use might also be helpful. – Michail Feb 27 '19 at 20:39
  • please share code where you are facing issue , as it will be difficult to tell from just span from your question – Naga Sai A Feb 27 '19 at 20:46
  • done, thank for advice, am new here – Someone Random Feb 27 '19 at 20:54

1 Answers1

0

To achieve expected result, use below option of rewriting innerHTML as below

var drawer = document.getElementById('draw');
var board = {a: ['aa', 'aa2','aa3'], b: ['ba', 'ba2','ba3']};
drawGrid = function(){
drawer.innerHTML = "";
var html = ''  
for(var i in board){
    for(var o in board[i]){
        html+="<span class='b"+board[i][o]+"'>"+board[i][o]+"</span>"
    }
    html+= '<br>'
}
  drawer.innerHTML = html
}
span{
  border: 1px solid black
}
<div id = "draw"></div>
<button onclick="drawGrid()">Draw</button>

codepen - https://codepen.io/nagasai/pen/OqVqrN

Please refer this link for more details - .append VS .html VS .innerHTML performance

Naga Sai A
  • 10,771
  • 1
  • 21
  • 40