为何Readmore按钮无法切换为Readless？点击文本显示隐藏功能异常

问题根源分析 #

你的代码存在以下几个关键问题：

• 元素选择错误：getElementsByClassName返回的是元素集合（HTMLCollection），不能直接调用.innerHTML，必须指定具体元素（比如取第一个匹配项）
• 属性拼写错误：innerHtml应为innerHTML（大小写敏感）
• 逻辑判断颠倒：原代码的if/else逻辑完全反向，且未实现按钮文字的双向切换
• HTML属性冗余：按钮的class属性写了两次，不符合规范
• 初始状态缺失：未给隐藏文本设置初始隐藏状态，导致首次判断失效

修正后的完整代码 #

HTML部分（修复class属性，添加初始隐藏样式）

<span id="mobile-member-description">
  Taha AlKuwaiz has extensive work experience during his
  career of more than 25 years in the financial services
  sector.
  <span id="more" style="display:none"> Hello how are you doing</span>
  <span id="mobile-member-description-readmore" class="read-more readMoreLink" onclick="myBtn()">Read more</span>
</span>

JavaScript部分（修复选择器、拼写及逻辑）

function myBtn(){
  // 从元素集合中取第一个匹配的按钮
  var readMoreLink = document.getElementsByClassName("readMoreLink")[0];
  var moreText = document.getElementById("more");

  // 判断当前文本是否处于隐藏状态
  if (moreText.style.display === "none") {
    // 显示文本，切换按钮文字为Readless
    moreText.style.display = "inline";
    readMoreLink.innerHTML = "Readless";
  } else {
    // 隐藏文本，切换按钮文字为Read more
    moreText.style.display = "none";
    readMoreLink.innerHTML = "Read more";
  }
}

更健壮的版本（适配无内联样式的场景） #

如果不想给#more加内联样式，可以用getComputedStyle获取元素实际显示状态：

function myBtn(){
  var readMoreLink = document.getElementsByClassName("readMoreLink")[0];
  var moreText = document.getElementById("more");
  // 获取元素当前的实际显示状态
  var isHidden = window.getComputedStyle(moreText).display === "none";

  if (isHidden) {
    moreText.style.display = "inline";
    readMoreLink.innerHTML = "Readless";
  } else {
    moreText.style.display = "none";
    readMoreLink.innerHTML = "Read more";
  }
}

内容的提问来源于stack exchange，提问作者David-JSON