我想用js修改一个<tspan>

Question

我想用js修改，但我做不到。我没有错误消息。

js

<!-- language: lang-js -->

    function taux() {
      let rue = document.getElementById("input-rue").value;
      let tauxrue = document.getElementById("tr");
      tauxrue.innerText = rue;

<!-- language: lang-html -->

svg/html

    <text id="_33ème_édition_-_1019ème_gp" data-name="33ème édition - 1019ème gp" class="cls-5" transform="translate(122 162)"><tspan x="0" y="0" id="tr">33</tspan><tspan class="cls-6" y="0">ÈME</tspan><tspan y="0" xml:space="preserve"> ÉDITION - 1019</tspan><tspan class="cls-6" y="0">ÈME</tspan><tspan y="0" xml:space="preserve"> GP</tspan></text>

Answer 1

您可以使用textContent。另外，我会在函数外部定义输入和tauxrue。

​

let ir=document.getElementById("input-rue");
let tauxrue = document.getElementById("tr");

ir.addEventListener("input",taux)

function taux() {
      let rue = ir.value;
      tauxrue.textContent = rue;
 }

<input type="text" id="input-rue"/>

<svg viewBox="120 140 300 300"> 
<text id="_33ème_édition_-_1019ème_gp" data-name="33ème édition - 1019ème gp" class="cls-5" transform="translate(122 162)"><tspan x="0" y="0" id="tr">33</tspan>
  <tspan class="cls-6" y="0">ÈME</tspan>
  <tspan y="0" xml:space="preserve"> ÉDITION - 1019</tspan>
  <tspan class="cls-6" y="0">ÈME</tspan>
  <tspan y="0" xml:space="preserve"> GP</tspan></text>
</svg>

​