SVGの<text>要素の値を取得して設定する方法

Question

SVGのテキスト要素の値を読み込んで更新しようとしています。

ユーザーが（+）または（ - ）を押すと、2つの符号の間の値が増分または減分され、ページ上で更新されます。そのためには、私は 'text'要素の現在の値を読んでそれを更新できる必要があります。ここで

はJSFiddle http://jsfiddle.net/hVyTJ/150/とコードです：

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

ヘルプは高く評価されます。

Answer 1

何か。 textContentは、適切な要素を選択すると、テキストを取得または設定します。

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

Answer 2

jqueryのを使用して、あなたはこれを行うことができます。おそらく、このような

//Get the value of an element 
var someElement = $(".some-selector").val(); 

//Set the value of an element 
var someElement.val("aValueToSet");