我想用js修改一个 <tspan>答案

【问题标题】：I would like to modify a <tspan> with js我想用js修改一个 <tspan>
【发布时间】：2020-07-15 19:05:38
【问题描述】：

我想用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>

【问题讨论】：

我看不到您的 let rue = document.getElementById("input-rue").value; 元素在您的代码中的位置。
我注意到的第一件事是你没有关闭 js 中的函数括号
你好，js在js文件里但是我不明白你的问题。
input-rue 这只是我输入的 id
也许这会对你有所帮助：stackoverflow.com/a/4282289/2610061

标签： javascript html css svg tspan

【解决方案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>

【讨论】：

抱歉，taux 没有定义ir.addEventListener("input",taux)
Uncaught TypeError: Cannot read property 'value' of null at taux (form.js:12) at HTMLButtonElement.onclick (template-two.html:207)