Change obj.innerHTML in Javascript? Game of Life
<p>I have implemented the Game of Life in Javascript.  I am thinking about making a combobox which a listof colors to choose from.  From there I want to render the obj.innerHTML img source of my grid cells in the game.  What would be the best way to go about this?</p>

<p>Here is my code so far for the game:</p>

</p>

<pre><code>    &lt;br&gt;
    &lt;canvas id="canvas" width="100%" height="80%"&gt;&lt;/canvas&gt;

    &lt;button onClick="generateLevel()"&gt;Create New Board&lt;/button&gt;
    &lt;button onClick="step()"&gt;Step&lt;/button&gt;
    &lt;button onClick="multiStep()"&gt;Multistep&lt;/button&gt;    

    &lt;script type="text/javascript"&gt;

    var level;
    var lastLevelDrawn;
    var lvlWidth = 0;
    var lvlHeight = 0;

    function step()
    {

        var tempLevel = new Array(lvlHeight);
        for (var y = 0; y &lt; lvlHeight; y++)
        {
            tempLevel[y] = new Array(lvlWidth);
            for (var x = 0; x &lt; lvlWidth; x++)
            {
                var liveNeighborCount = 0;
                var status = level[y][x];
                for (var k = y-1; k &lt; y+2; k++)
                {
                    for (var j = x-1; j &lt; x+2; j++)
                    {
                        if (k == y &amp;&amp; j == x)
                        {

                        }
                        else if (k &gt;= 0 &amp;&amp; k &lt; lvlHeight &amp;&amp; j &gt;= 0 &amp;&amp; j &lt; lvlWidth)
                        {
                            if (level[k][j] == "1")
                            {
                                liveNeighborCount++;
                            }
                        }   
                    }
                }

                if (level[y][x] == "1")
                {
                    if (liveNeighborCount != 2 &amp;&amp; liveNeighborCount != 3)
                    {
                        status = "0";
                    }

                }
                if (level[y][x] == "0")
                {
                    if (liveNeighborCount == 3)
                    {
                        status = "1";

                    }

                }
                tempLevel[y][x] = status;                   
            }
        }
        level = tempLevel;
        render();
    }       

    function multiStep()
    {
                    var steps = prompt("How many steps do you want to step?", "10");
        for (var x = 0; x &lt; steps; x++)
            step();
    }   

    function generateLevel()
    {

        var width = prompt("How many cells wide?", "10");
        var height = prompt("How many cells high?", "10");
        lvlWidth = width;
        lvlHeight = height;
        var output = "";
        if (width != null &amp;&amp; height != null)
        {
            level = new Array(lvlHeight);
            lastLevelDrawn = new Array(lvlHeight);
            for (var y = 0; y &lt; height; y++)
            {
                level[y] = new Array(lvlWidth);
                lastLevelDrawn[y] = new Array(lvlWidth);
                for (var x = 0; x &lt; width; x++)
                {
                    level[y][x] = Math.floor((Math.random()*2));
                    lastLevelDrawn[y][x] = -1;
                    output += " " + level[y][x];
                }
                output += "&lt;br&gt;";
            }
        }

        //document.getElementById("demo").innerHTML=output;
        setupRender();
    }

    function changeTile(tile)
    {
        var x = tile % lvlWidth;
        var y = parseInt(tile/lvlWidth);
        //document.getElementById("demo").innerHTML=x + ":" + y;
        if (level[y][x] == "1")
            level[y][x] = "0";
        else
            level[y][x] = "1";

        render();           
    }

    function render()
    {
        var widPer = ((1/lvlWidth)*90);
        var heiPer = ((1/lvlHeight)*70);
        for (var y = 0; y &lt; lvlHeight; y++)
        {
            for (var z = 0; z &lt; lvlWidth; z++)
            {
                var send = y*lvlWidth + z;
                if (lastLevelDrawn[y][z] != level[y][z])
                {
                    lastLevelDrawn[y][z] = level[y][z];
                    var obj = document.getElementById(send);
                    if (level[y][z] == "1")
                        obj.innerHTML = "&lt;img src='white.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/&gt;";
                    else 
                        obj.innerHTML = "&lt;img src='black.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/&gt;";
                }
            }
        }
    }


    function setupRender()
    {   
        var x = "";
        var widPer = ((1/lvlWidth)*90);
        var heiPer = ((1/lvlHeight)*70);
        //x += "&lt;table border='1' col width='((1/lvlWidth)*100)%' col height='((1/lvlHeight)*80)%'&gt;";
        for (var y = 0; y &lt; lvlHeight; y++)
        {
            //x += "&lt;tr&gt;";
            for (var z = 0; z &lt; lvlWidth; z++)
            {
                lastLevelDrawn[y][z] = level[y][z];
                //x += level[y][z];
                var send = y*lvlWidth + z;
                x += "&lt;n id='" + send + "'&gt;";
                if (level[y][z] == "1")
                    x += "&lt;img src='white.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/&gt;";
                else 
                    x += "&lt;img src='black.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/&gt;";
                x += "&lt;/n&gt;";

            }
            x += "&lt;br&gt;";
            //x += "&lt;/tr&gt;";
        }
        //x += "&lt;/table&gt;";
        document.getElementById("demo").innerHTML=x;
    }       

    &lt;/script&gt;
</code></pre>
