javascript - 如何通过 Javascript 插入 svg 元素表

Question

对于一个大学项目，我需要使用 html、javascript 和 bootstrap 制作一个 4 行游戏，到目前为止进展顺利，但我似乎无法正确创建 svg 元素。我使用以下代码来创建 svg 元素:

<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>

这是我的 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>

我对 HTML 还很陌生，因此我们将不胜感激。

谢谢。

Answer 1

看起来您正在将 int 而不是字符串传递给 getElementById。尝试在 html 的 onload 中添加单引号 1 左右，看看是否可以解决您的问题: onload="populate(red, '1')"

此外，如果您还想将“red”作为字符串传递，则可能需要在“red”两边加上单引号。