Javascript 用单击顺序替换可单击单词

我想点击句子中的某个单词，然后点击顺序的编号来替换点击的单词。接下来，当我点击这个数字时，这个词会再次出现。我面临的问题对我来说很奇怪。当我在数字上单击右侧时这个数字的行为就像它是数字一样，尽管它是替换字符串，并且增加了一。当我按稍高于数字（！！！）时，该单词会正常显示，正如我所希望的那样

示例

这是我想处理的文本：

这是1个文本2到工作3（点击'the'、'want'和'on'） 这是我想处理的1个文本3（单击“2”）

请记住，这个问题与这个问题密切相关

这是我想要处理的文本
跨度{
/*这将保持跨度的宽度*/
显示：内联块；
/*这将使文本在跨度内居中*/
文本对齐：居中；
}
//单击时保留单词的数组
var vArray=[]；
const hExample=document.getElementById（'hExample'）；
//把句子分成一组单词
让jExample=hExample.innerHTML；
让words=jExample.split（“”）；
//将每个单词用一个空格括起来
让内容=”；
for（const单词中的单词）{
content+=`${word}`；
}
//将所有跨距添加到hExample
hExample.innerHTML=内容；
//点击一个单词
函数句柄或单击（evt）{
//获取单击的跨度
const span=evt.target；
if（span.dataset.word）{
//从span的“数据字”属性中提取字并以红色显示
span.innerHTML=span.dataset.word；
删除span.dataset.word；
span.style.color='红色'；
//当单击数字时，从数组中取出单词
vArray=vArray.filter（item=>item！==span.innerHTML）；
}否则{
//保持跨度的当前宽度
span.style.width=span.getBoundingClientRect（）.width+“px”；
//将单词存储在span的“数据单词”属性中
span.dataset.word=span.innerHTML；
//单击word后，将该单词放入数组中
push（span.dataset.word）；
//用数字代替单词
span.innerHTML=vArray.length.toString（）.fontsize（5）；
span.style.color='红色'；
}
}
//聆听hExample中的点击
hExample.addEventListener（'click'，HandleOrdClick）；

在else语句中，这一行：

span.innerHTML =  vArray.length.toString().fontsize(5);

将范围转换为无法访问属性“data word”的标记 所以它永远不会进入if-else的前半部分。 使用将.fontsize（5）移动到新行

span.style.fontSize = "x-large";

---

应该解决这个问题

那么，您的需求的第一部分是有效的，但是您做了什么来尝试让第二部分有效呢？具体的问题是什么，而不仅仅是您需要满足的要求？如果我替换span.innerHTML=arr.length.toString（）；span.innerHTML='-'；它很好用。我不明白字符串“-”与字符串“arr.length.toString（）”的行为有何不同，就是这样！！！我决不会想到这样的答案。非常感谢你！！！亲爱的斯科特，我也非常感谢你。深入了解知识并向他人学习是非常明智的。再次感谢您花时间和精力给出正确的解释。不客气，在控制台中添加几个console.logs（）并将html与您希望看到的内容进行比较也不会有什么坏处