classList.remove does not work within addeventlistener (Vanilla JS)

Question

I have a function that hides a part of the text, and if the person clicks "read more", the rest of the text is displayed.

However, I’m unable to remove the class that hides the text part. I saw that the code was correct because I tested it on the console, but it does not work inside my Event Listener.

Code:

document.addEventListener("DOMContentLoaded", function() {
  var fullText = document.getElementById('full-text')
  var container = document.getElementById('container')
  var gradient = document.getElementsByClassName('gradient')
  var seeMore = document.getElementsByClassName('see-more-btn')
  var heightBox = fullText.offsetHeight

  if (heightBox > 150) {
    fullText.classList.add('is--short-text')
    fullText.innerHTML += '<div class="gradient"></div>'
    container.innerHTML += '<span class="see-more-btn">See more</span>'
  
    seeMore[0].addEventListener('click', function() {
      fullText.classList.remove('is--short-text')
      hide(gradient[0])
      hide(seeMore[0])
    }, false)
  }
})

function hide(elem) {
  elem.style.display = 'none'
}

body {
  background: #f0f0f0;
}
.container {
  padding: 15px;
  max-width: 760px;
  background: #fff
}
#full-text {
  position: relative;
  height: auto;
  overflow: hidden;
}
.is--short-text {
  height: 150px !important;
}
.see-more-btn {
  display: block;
  width: 150px;
  margin: 20px auto 0;
  padding: 5px 20px;
  border-radius: 5px;
  background: #f0f0f0;
  text-align: center;
  color: #777;
  cursor: pointer;
}
.gradient {
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: linear-gradient(to bottom, transparent, #fff);
}

<div class="container mt-5 bg-white" id="container">
  <h1 class="h1 text-center">Lorem ipsum</h1>
  <div id="full-text">
     <p>Frankfurter shank salami turkey jerky, porchetta boudin cow.  Bacon drumstick beef ribs, tongue pork loin chicken ball tip fatback shank.  Meatloaf landjaeger tongue, cupim capicola leberkas kevin porchetta bresaola.  Prosciutto pork beef ribs salami.  Cupim shoulder corned beef, beef ribs ball tip pastrami tongue brisket salami venison beef turkey chicken jowl pork loin.  Jerky pork chop cupim meatloaf capicola salami.  Pork loin pig buffalo hamburger, tri-tip prosciutto beef ribs ground round shoulder meatloaf bresaola pork chop filet mignon.</p>
  <p>Burgdoggen leberkas pork chop shankle ribeye.  T-bone ribeye strip steak pig, meatball pork belly flank turducken spare ribs.  Burgdoggen porchetta ground round doner spare ribs ham hock.  Capicola pancetta fatback alcatra corned beef filet mignon.</p>
  <p>Turkey bresaola short loin, ribeye shank t-bone chicken fatback shankle rump.  Tenderloin salami bresaola chuck andouille ham hock.  Flank corned beef filet mignon drumstick short ribs salami turkey spare ribs doner strip steak biltong.  Picanha short loin pancetta tongue meatball porchetta brisket capicola pastrami pork chop.  Shank flank picanha pork loin alcatra kevin pork shankle.  Burgdoggen hamburger pastrami, rump bresaola kielbasa pork beef shoulder drumstick salami ribeye cupim chicken.</p>
  </div>
</div>

Why would the classList.remove() doesn’t work?

Answer 1

That one seeMore[0].addEventListener is in a different context from document.addEventListener, you won’t be able to use the var fullText here. For this, you need to get the element again like this.

document.getElementById('full-text').classList.remove('is--short-text')