Why readmore is not changing to readless?-CodePudding

I'm showing and hiding the text on onclick of readmore. But don't know why it is causing the issue.

function myBtn(){
  var readMoreLink = document.getElementsByClassName("readMoreLink");
  var readMore = document.getElementsByClassName("myBtn");
  var moreText = document.getElementById("more");

  if (moreText.style.display === "none") {
    moreText.style.display = "none";
  } else {
    moreText.style.display = "inline";
    readMoreLink.innerHtml = "readless"
  }
}

<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" > Hello how are you doing</span>
                   <span id="mobile-member-description-readmore"  onclick="myBtn()" >Read more</span>
                  </span>

CodePudding user response：

Here's the working code:

function changeReadMore() {
  var readMoreLink = document.getElementById(
"mobile-member-description-readmore"
  );
  //var readMore = document.getElementsByClassName("myBtn");
  var moreText = document.getElementById("more");

  if (moreText.style.display !== "none") {
moreText.style.display = "none";
readMoreLink.textContent = "Read more";
  } else {
moreText.style.display = "inline";
readMoreLink.textContent = "Read less";
  }
}
changeReadMore();

document
  .getElementById("mobile-member-description-readmore")
  .addEventListener("click", changeReadMore);

<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"> Hello how are you doing?</span>
  <span id="mobile-member-description-readmore"  style="text-decoration: underline;">Read less</span>
</span>