Question

这可能是一件微不足道的事情，但我似乎无法弄明白。 document.getElementById选择我尝试写入数据的tspan，但没有显示任何内容。代码如下。 var percentAS设置为71，工作正常。控制台中没有错误。请注意，这是我的代码的最小化版本，实际上在文档中还有很多。

<body>
    <text id="data" fill="white" x="460" y="160">
        {{signups.[0]}} -
        <tspan id="percentAS"></tspan>
    </text>
</body>

<script>
    document.getElementById("percentAS").innerHTML = percentAS + "%";
</script>

我尝试将一些数据记录到控制台以查看发生了什么：

console.log(document.getElementById("percentAS"));

这将在错误控制台中返回：

tspan#percentAS.[object SVGAnimatedString]
  innerHTML: "71%"
  __proto__: SVGTSpanElementPrototype

编辑其他人要求提供更多上下文，但我确信没有任何干扰我上面粘贴的内容，或者我会添加更多上下文。它只是一些基本的sgv多边形，因为它们有很多点而非常难以阅读，这就是为什么我没有包含它们。

编辑2 我的问题似乎是Safari网络浏览器的独特之处，因为我在Chrome和Firefox中打开它并且它运行得非常好。我找不到Safari的任何已知问题，尽管我几年前发现了一些博客文章，详细说明了类似的问题。

Answer 1

看起来这是Safari网络浏览器本身的问题，而不是代码。我转而使用jQuery来实现它：

 $("#percentAS").append(percentAS + "%");

它在所有浏览器中都运行良好。

Answer 2

您的问题是，在您的Javascript中，变量percentAs不受任何约束。

如果你给它一个值，例如var percentAs = 45它就可以了。

编辑：根据某人的评论。很高兴看到代码中声明percentAs的位置，因为这可能会影响尝试访问它的函数的工作方式。

Answer 3

这很好用。你的代码中肯定会出现其他问题。

var percentAS = 71;
document.getElementById("percentAS").innerHTML = percentAS + "%";

<text id="data" fill="white" x="460" y="160">{{signups.[0]}} -
    <tspan id="percentAS"></tspan>
</text>

innerHTML没有显示在DOM中，控制台中没有错误

3 个答案: