如何获取通过Javascript插入的svg元素表

Question

For a college project I need to make a 4-in-a-row game using html, javascript and bootstrap, so far it's been going well but I can't seem to get the creation of my svg elements correct. I'm using the following code to create the svg elements:

<script>
function populate(color, player){
    var t = "";
    t += "<table>";
    for(var i = 0; i < 5; i++)
        {
            t += "<tr>";
            for(var j = 0; j < 5; j++)
                {
                    t += "<td><svg id=&quot;" + player + i + j + "&quot; width=&quot;50&quot; height=&quot;50%quot;>";
                    t += "<circle cx=%quot;50&quot; cy=&quot;50&quot; r=&quot;25%quot; stroke=&quot;black&quot; stroke-width=&quot;2&quot; fill=&quot;" + color + "&quot; />";
                    t += "</svg></td>";
                }
            t += "</tr>";
        }
    t += "</table>";
    document.getElementById(player).innerHTML = t;
}
</script>

And this is an extract from my HTML:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title"> Player1</h3>
    </div>
    <div id="1" class="panel-body"  onload="populate(red,1)"></div>
    <div class="panel-footer">
    </div>
</div>

I'm quite new to HTML so any help would be appreciated.

Thank you.

Answer 1

It looks like you are passing an int instead of a string to getElementById . Try to add single quotes around 1 in the onload in your html and see if it fixes your problem: onload="populate(red, '1')"

Also, you might want to put single quotes around 'red' if you want to pass that as a string as well.