How to get and set the value of & lt; text & gt; element in SVG

advertisements

I am trying to read and update value of an SVG's text element.

When a user presses (+) or (-) the value in between the two signs should be incremented or decremented and updated on the page as well. For that I need to be able to read the current value of 'text' element and update that.

Here is the JSFiddle http://jsfiddle.net/hVyTJ/150/ and the code:

<div>
   <table>
     <tr>
       <td>
            <svg width="320" height="65">
                <text x="213" y="48" style="fill:black;font-size:24;" >+</text>
                <text x="284" y="39" style="fill:black;font-size:24;">_</text>

                <circle cx="220" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />
                <circle cx="290" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />

                <rect onclick="AddQuantity(event, this);" x="200" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <rect onclick="AddQuantity(event, this);" x="270" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <text x="247" y="45" style="fill:black;font-size:12;">800</text>

            </svg>
       </td>
     </tr>
     <tr>
       <td>
            <svg width="320" height="65">
                <text x="213" y="48" style="fill:black;font-size:24;" >+</text>
                <text x="284" y="39" style="fill:black;font-size:24;">_</text>

                <circle cx="220" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />
                <circle cx="290" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />

                <rect onclick="AddQuantity(event, this);" x="200" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <rect onclick="AddQuantity(event, this);" x="270" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <text x="247" y="45" style="fill:black;font-size:12;">900</text>

            </svg>
       </td>
     </tr>
   </table>
</div>

<script>

function AddQuantity(event,x) {
  event.stopPropagation();

  var y = x.parentNode.lastChild;
  alert(y);

  // Not Sure how to retrieve the value
  var z = x.parentNode.lastChild.nodeValue;
  alert(z);

  // Not Sure how to set the value
  x.parentNode.lastChild.nodeValue = 777;

}

</script>

Help will be highly appreciated.


Something like this perhaps. textContent gets/sets the text providing you select the right element.

<div>
   <table>
     <tr>
       <td>
            <svg width="320" height="65">
                <text x="213" y="48" style="fill:black;font-size:24;" >+</text>
                <text x="284" y="39" style="fill:black;font-size:24;">_</text>

                <circle cx="220" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />
                <circle cx="290" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />

                <rect onclick="AddQuantity(evt, 1);" x="200" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <rect onclick="AddQuantity(evt, -1);" x="270" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <text x="247" y="45" style="fill:black;font-size:12;">800</text>

            </svg>
       </td>
     </tr>
     <tr>
       <td>
            <svg width="320" height="65">
                <text x="213" y="48" style="fill:black;font-size:24;" >+</text>
                <text x="284" y="39" style="fill:black;font-size:24;">_</text>

                <circle cx="220" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />
                <circle cx="290" cy="40" r="15" stroke="black" stroke-width="0.5" fill="none" />

                <rect onclick="AddQuantity(evt, 1);" x="200" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <rect onclick="AddQuantity(evt, -1);" x="270" y="20" width="40" height="40" style="fill-opacity:0.1" />
                <text x="247" y="45" style="fill:black;font-size:12;">900</text>

            </svg>
       </td>
     </tr>
   </table>
</div>

<script>

function AddQuantity(evt, amount) {
  evt.stopPropagation();

  var y = evt.target;

  // retrieve the value
  var z = y.parentNode.lastElementChild.textContent;
  // set the value
  y.parentNode.lastElementChild.textContent = parseInt(z) + amount;

}

</script>