Javascript 如何获取和设置<；文本>；SVG中的元素？

我试图读取并更新SVG文本元素的值

当用户按下（+）或（-）时，两个符号之间的值应递增或递减，并在页面上更新。为此，我需要能够读取“text”元素的当前值并更新它

以下是JSFIDLE和代码：

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

+
_
800
+
_
900
函数AddQuantity（事件，x）{
event.stopPropagation（）；
变量y=x.parentNode.lastChild；
警报（y）；
//不确定如何检索该值
var z=x.parentNode.lastChild.nodeValue；
警报（z）；
//不确定如何设置该值
x、 parentNode.lastChild.nodeValue=777；
}

使用jquery，您可以执行以下操作：

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

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

---

也许是这样的。textContent获取/设置文本，前提是您选择了正确的元素

+
_
800
+
_
900
功能添加数量（evt，金额）{
evt.stopPropagation（）；
var y=evt.target；
//检索值
var z=y.parentNode.lastElementChild.textContent；
//设置值
y、 parentNode.lastElementChild.textContent=parseInt（z）+金额；
}

谢谢你，罗伯特。这太棒了。你能给我指一个简单的参考，解释如何访问所有这些节点/子值吗？