Question

42

grab svg text value with javascript

rated 0 times [ 44] [ 2] / answers: 1 / hits: 24045 / 12 Years ago, mon, july 30, 2012, 12:00:00

I have this javascript...

window.writeText = function(form) {

  var text;

  form.catnumber2.value = "PING";

  text = document.getElementByName('cat2Number').innerHtml;

  return alert(text);

};

But I get no alert box as expected.

The svg does not show up when I view source via view/developer/view source (I'm in chrome) BUT when I use view/developer/developer tools....I can see the following svg....

<svg height="594">

    <g ID="MasterG">

        <text name="cat2Number">"$1234"</text>

    </g>

</svg>

Any idea what I'm doing wrong? Why is it I can't see the svg code in "view source" but I can in "developer tools" ? Is that the cause of my problem? Is that why my alert box won't "alert"?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

adrianobeds

Add To Favorites

Follow

Total Points: 558

Total Questions: 118

Total Answers: 116

Location: Luxembourg

Member since Tue, Jan 25, 2022

2 Years ago

answered 12 Years ago brodyfrancisi · Accepted Answer

After a couple of seconds of googling and finding this https://stackoverflow.com/a/9602772/1217408

I created this JSFiddle example of using textContent: http://jsfiddle.net/hVyTJ/1/

The original http://jsfiddle.net/hVyTJ/ uses standard DOM traversal to get to the text element from the root SVG element. While the update targets the text element directly by ID.

As for finding attribute values you can use getAttributeNS as described here: http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

EDIT:

As pointed out by Phrogz, a simple getAttribute call is often sufficient. Read the comment for more details.