I would like to modify a <tspan> with js

Question

I would like to modify the with js but I can't do it. I have no error message.

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

You can use textContent. Also I would defint the input and the tauxrue outside the function.

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>