Change svg element only works some of the times

Question

I am trying to use javascript and html5 to create a HMI for a project. In this first experiment i just want to change a text element in the svg document.

The svg object is defined in html like this:

<object id="image-svg" width="800" height="800" type="image/svg+xml" data="image.svg"></object>

This script:

function update_txtPv( val )
{
    var imageSvgDoc = document.getElementById( "image-svg" ).contentDocument;
    var txtPv = imageSvgDoc.getElementById( "txtPv" );
    txtPv.textContent = val;
}

update_txtPv( "test" );

gets called once when the page loads.

Problem is that if I refresh the page ten times it only sets the text object to "test" about three of the times.

if I add an alert( "something" ); in the beginning of the function it works.

What is going on?

//John

Be sure your svg got loaded (`document.getElementById( "image-svg" ).addEventListener('load',function(){update_txtPv( "test" );});`) + look in your js console for errors thrown. — Kaiido, Feb 14 '15 at 00:26
@Kaiido That makes sense. But I still get "TypeError: imageSvgDoc is null" some of the times. — John, Feb 14 '15 at 11:49

score 0 · Accepted Answer · edited May 23 '17 at 12:34

0

So... it turned out that i needed to wait for the svg document to load before starting to alter it.

Ended up using a solution from this thread. Big thanks to Kaiido for pointing out that I need to wait for the svg to finish loading before calling the function.

edited May 23 '17 at 12:34

Community

1
1

answered Feb 14 '15 at 12:02

John

530
5
19

Change svg element only works some of the times

1 Answers1