Home > front end >  trying to limit the number of characters with JavaScript when the screen is in mobile
trying to limit the number of characters with JavaScript when the screen is in mobile

Time:09-07

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>

CodePudding user response:

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

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

CodePudding user response:

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

  • Related