Javascript点击按钮后str.length值异常变化问题咨询

哦，我完全懂你困惑的点！咱们来仔细拆解你的代码到底发生了什么：

为什么长度会一直变？ #

每次你点击"Try it"按钮时，代码会执行两个关键步骤：

1. 先获取demo元素当前的innerHTML内容，赋值给str
2. 把demo的innerHTML改成str.length的计算结果

咱们一步步还原过程：

• 第一次点击：demo里的内容是字符串"Visit Microsoft!"，它的长度是15，所以demo的内容被替换成了15
• 第二次点击：这时候demo里的内容已经变成了字符串"15"，它的长度是2，所以demo又被替换成了2
• 第三次点击：demo内容是"2"，长度是1，之后再点击就一直显示1了

简单来说，你每次都在修改目标元素的内容，下一次点击又会读取这个被修改后的内容来计算长度，自然就会出现长度不断变化的情况啦！

怎么解决？ #

核心思路是：把原始的文本内容提前保存下来，不要每次都从已经被修改的demo元素里读取。这里有两种实用的解决方式：

方式1：只显示原始文本的长度

页面加载时就把原始内容存在变量里，每次点击都用这个固定值计算长度：

// 页面加载完成后，先保存好原始文本内容
const originalText = document.getElementById("demo").innerHTML;

function myFunction() {
  document.getElementById("demo").innerHTML = originalText.length;
}

方式2：点击按钮切换显示原始文本/长度

如果想实现点击按钮在原始文本和长度之间来回切换，可以加一个状态标记：

const originalText = document.getElementById("demo").innerHTML;
let isShowingLength = false; // 标记当前是否显示长度

function myFunction() {
  const demoElement = document.getElementById("demo");
  if (isShowingLength) {
    // 当前显示长度，切换回原始文本
    demoElement.innerHTML = originalText;
  } else {
    // 当前显示文本，切换成长度
    demoElement.innerHTML = originalText.length;
  }
  // 切换状态标记
  isShowingLength = !isShowingLength;
}

这样不管点击多少次，长度都会是原始文本的固定值，不会再乱变啦～

内容的提问来源于stack exchange，提问作者Parisa Zomorodian