Character counter in jQuery

Navigation
0

I have done an exercise with jQuery in which I have to put paragraphs with less than 100 characters with yellow background color, but I put any paragraph in yellow.

Code: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ejercicio 20</title>
        <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(document).ready(function ()
            {
               if($('p').val().length < 100)
               {
                   $('p').css("background-color","yellow");
               }
            });
        </script>
        <style>
            p{display: table;}
        </style>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum cupiditate eaque explicabo ipsam magnam magni modi
            mollitia nobis optio placeat porro, quaerat quasi, quis quisquam quo similique sint sit tempora?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid dignissimos distinctio dolore doloremque
            eaque enim laudantium, nihil nulla obcaecati quod repudiandae soluta velit? Adipisci ipsum reprehenderit suscipit voluptas voluptatum?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid dignissimos distinctio dolore doloremque
            eaque enim laudantium, nihil nulla obcaecati quod repudiandae soluta velit? Adipisci ipsum reprehenderit suscipit voluptas voluptatum?
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid dignissimos distinctio dolore doloremque
            eaque enim laudantium, nihil nulla obcaecati quod repudiandae soluta velit? Adipisci ipsum reprehenderit suscipit voluptas voluptatum?
        </p>
    </body>
</html>
    
asked by Mario Guiber 23.02.2018 в 12:48
source

2 answers

1

You have to go through all the elements p and change the background using this , when the condition is fulfilled.

Also, you are using val() , to get the text size. You must use text() , so it says the jQuery documentation :

  

The .text() method can not be used on form inputs or scripts . To   set or get the text value of input or textarea elements, use the    .val() method. To get the value of a script element, use the    .html() method.

That is, val() is used to retrieve values in input elements and text() for values that are already in the DOM, such as p, span, ...

Also, I used function , it's preferable to document.ready , which is obsolete since jQuery3. 

$(function() {
  $("p").each(function() {
    console.log($(this).text().length);
    if ($(this).text().length < 100) {
      $(this).css("background-color", "yellow");
    }
  });
});
p {
  display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>En amarillo</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum cupiditate eaque explicabo ipsam magnam magni modi mollitia nobis optio placeat porro, quaerat quasi, quis quisquam quo similique sint sit tempora? Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Adipisci aliquid dignissimos distinctio dolore doloremque eaque enim laudantium, nihil nulla obcaecati quod repudiandae soluta velit? Adipisci ipsum reprehenderit suscipit voluptas voluptatum? Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Adipisci aliquid dignissimos distinctio dolore doloremque eaque enim laudantium, nihil nulla obcaecati quod repudiandae soluta velit? Adipisci ipsum reprehenderit suscipit voluptas voluptatum?
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid dignissimos distinctio dolore doloremque eaque enim laudantium, nihil nulla obcaecati quod repudiandae soluta velit? Adipisci ipsum reprehenderit suscipit voluptas voluptatum?
</p>
    
answered by 23.02.2018 / 13:04
source
2

The problem is that you are not controlling the selected elements individually, but rather the text that they all contain.

Solution:

  • Using .each we can individually control all selected items
  • Using .text() we can access the texto of the element

Demo: 

$(document).ready(function() {
  
  $('p').each(function(idx, element) {
    let $p = $(element);
    if ($p.text().length < 100) {
      $p.css("background-color", "yellow");
    }
  });
});
p {
  display: table;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum cupiditate eaque explicabo ipsam magnam magni modi mollitia nobis optio placeat porro, quaerat quasi, quis quisquam quo similique sint sit tempora? Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Adipisci aliquid dignissimos distinctio dolore doloremque eaque enim laudantium, nihil nulla obcaecati quod repudiandae soluta velit? Adipisci ipsum reprehenderit suscipit voluptas voluptatum? Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Adipisci aliquid dignissimos distinctio dolore doloremque eaque enim laudantium, nihil nulla obcaecati quod repudiandae soluta velit? Adipisci ipsum reprehenderit suscipit voluptas voluptatum?
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid dignissimos
</p>
    
answered by 23.02.2018 в 13:04
Replace characters in column during SELECT SQL Show all input checkbox marked but with a jquery line break