innerHTML not displaying in the DOM, no errors in the console

Question

innerHTML not displaying in the DOM, no errors in the console

356 views Asked by thekeegs At 16 June 2015 at 17:23

This might be something trivial to solve, but I can't seem to figure it out. document.getElementById selects the tspan I'm trying to write data to, but nothing shows up. Code as follows. The var percentAS is set to 71, which is working fine. No errors in the console. Note this is a minimized version of my code there's actually a lot more in the document.

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

I tried logging some data to the console to see what was going on:

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

And this is returned in the error console:

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

EDIT Others have asked for more context, but I know for sure that there is nothing interfering with what I pasted above, or I would have added more context. It's just some basic sgv polygons that are a huge pain to read because they have so many points, which is why I didn't include them.

EDIT 2 It appears that my issue is unique to the Safari web browser, as I opened it in Chrome and Firefox and it works perfectly fine. I can't find any known issues with Safari in regards to this, although I've found a couple blog posts from a few years ago detailing a similar issue.

Original Q&A

There are 3 answers

Pytth On 16 June 2015 at 17:27

Your problem is that in your Javascript, the variable percentAs is not bound to anything.

If you gave it a value, such as var percentAs = 45 it would work.

EDIT: As per someone's comment. It would be nice to see where percentAs is being declared in your code since that could effect the way functions work that try to access it.

Zack On 16 June 2015 at 17:32

This is working fine. There must be something else going wrong in your code.

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

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

**thekeegs** · Accepted Answer · 2015-06-19 19:10:37

thekeegs On 19 June 2015 at 19:10 BEST ANSWER

Looks like it's a problem with Safari web browser itself and not the code. I switched to using jQuery to do it:

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

and it worked just fine in all browsers.

TechQA.

innerHTML not displaying in the DOM, no errors in the console

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in INNERHTML

Related Questions in GETELEMENTBYID

Popular Questions

Popular Tags

Trending Questions