2

Eu tenho uma função que esconde uma parte do texto, e caso a pessoa clique em "leia mais", o resto do texto é exibido.

No entanto, eu não estou conseguindo remover a classe que esconde a parte do texto. Vi que o código estava correto, pois testei ele no console, mas ele não funciona dentro do meu event listener.

Código:

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>

Por que será que o classList.remove() não funciona?

2
  • Me desculpe a ignorância, mas não estão faltando os ";" (ponto-e-vírgula) ao final das linhas do script? Commented 18/04/2019 às 14:57
  • 1
    @RodrigoTognin ooi Rodrigo! não precisa mais usar os ";" se vc quiser! eu acho q o código fica mais limpo dessa forma Commented 18/04/2019 às 15:01

1 Resposta 1

2

Esse seeMore[0].addEventListener está em um contexto diferente do document.addEventListener, você não conseguirá usar a var fullText aqui. Para isso, precisa obter o elemento novamente assim.

document.getElementById('full-text').classList.remove('is--short-text')
1
  • 1
    Obrigada! Eu imaginei que fosse algum erro de escopo, mas nem pensei em olhar as variáveis ahaha Fica de experiência. Commented 18/04/2019 às 16:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .