trying to limit the number of characters with JavaScript when the screen is in mobile

Mpimenta 0
Viewed 21

I'm trying to limit the number of characters with JavaScript when the screen is in mobile mode but I don't know what I could be doing wrong. I'm new to the area and I have this question.

Follow the JavaScript code

  <script>
    const descricaoScript = document.querySelectorAll('#descricao-script')
    const LIMIT = 135

  function cartersLimit() {
     for (let words of descricaoScript) {
      const aboveLimit = words.innerText.length > LIMIT
      const dotOrEmpty = aboveLimit? '...' : ''
      words.innerText = words.innerText.substring(0, LIMIT) + dotOrEmpty
    }
  }  
   

    if(document.body.clientWidth < 440) {
      cartersLimit === true
    } else {
        cartersLimit === false
    }
  </script>
if-statement javascript css html
2 Answers

You're not actually running the function. Try something like this:

if(document.body.clientWidth < 440) {
  cartersLimit();
}
asportnoy0

To add to the other great answer by asportnoy, you might also want to look in to what is called media queries. JavaScript has media queries to simplify this type of mobile design for you.

It basically uses attributes like

(max-width: 700px)

to perform your logic if your width is less than 700px in this case (and you can also use % values).

More info here: https://www.w3schools.com/howto/howto_js_media_queries.asp

Dennis Kozevnikoff0
Related