Is there anyone helping me to determine the error?

Question

I've created the code below to use with any post. It is added to the page and similar pages. Which is placed HTML for it and its function is to show hidden speech when pressed with changing the name of the button and vice versa, but it does not work properly.

HTML Code:

  <h3 class="h1">
                Event Name
            </h3>
            <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis itaque, perferendis 
                 nesciunt eum quidem hic delectus,
                <span id="dots" class="dots">...</span>
                <span id="more" class="more">Lorem ipsum dolor sit amet consectetur 
                 adipisicing elit. Repudiandae dolore </span>
                <button type="button" class="btn btn-outline-light read " id="read">Read 
                 more</button>
                <!--Chang button-->

            </p>

JQuery Code:

 // Start read more button 
    $(document).ready(function() {
        $('.read').click(function() {
            if ($(this).hasClass('active')) {
                $(this).html('Read more').removeClass('active');
                $(this).prev('.more').slideUp("slow");
            } else
                $(this).html('Read Less').addClass('active');
            $(this).prev('.more').slideDown("slow");
        });
    });
    // start comment system

The second is to add one number to the button when pressed and subtract it from the other, but it works with only one post on the page and I want it to work with an infinite number of posts on the same page and all the pages on which its HTML is placed

HTML Code :

 <div id="demo">
                <button class="like">
                  <i class="fa fa-heart" aria-hidden="true" onclick="clicking();"> Like</i> 
                  <span id="slike">0</span>
              </button>
                <button class="dislike">
                  <i class="fas fa-heart-broken" aria-hidden="true" class="dislikes" 
                  onclick="clicking();"> Dislike</i> 
                  <span id="dlike">0</span>
              </button>
            </div>

JQuery Code :

// Start  like & unlike button 
               var counter = 0,
               count = 0;
           $(document).ready(function() {
           $('.like').one('click', function clicking() {
              counter += 1;
               count -= 1;
               $('#slike').text(counter);
               $('#dlike').text(count);
         });
           var coun = 0,
             counte = 0;
          $('.dislike').one('click', function click() {
            coun += 1;
            counte -= 1;
            $('#dlike').text(coun);
            $('#slike').text(count);
        });
        // End  like & unlike button 
       });

One problem, one Question. Don't cram every problem you have in one question. — Dominique Fortin, Sep 02 '20 at 22:14

Dominique Fortin · Answer 1 · 2020-09-02T22:43:17.533

First problem

...
} else
    $(this).html('Read Less').addClass('active');
$(this).parent().find('.more').slideDown("slow");
...

should be

...
} else {
    $(this).html('Read Less').addClass('active');
    $(this).parent().find('.more').slideDown("slow");
}
...

For the second problem look at this

// Start  like & unlike button 
    var global_like = 15;
    var global_dislike = 3;
    var counter_like = 0;
    var counter_dislike = 0;

    $(document).ready(function() {
    
      show_like();
    
      $('.like').on('click', function () {
        counter_like = (counter_like+1)%2;
        counter_dislike = 0;
        show_like();
      });
      
      $('.dislike').on('click', function () {
        counter_like = 0;
        counter_dislike = (counter_dislike+1)%2;
        show_like();
      });
      // End  like & unlike button 
    });
    
    function show_like() {
      $('#slike').text(global_like + counter_like);
      $('#dlike').text(global_dislike + counter_dislike);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="demo">
                <button class="like">
                  <i class="fa fa-heart" aria-hidden="true"> Like</i> 
                  <span id="slike">0</span>
              </button>
                <button class="dislike">
                  <i class="fas fa-heart-broken" aria-hidden="true"> Dislike</i> 
                  <span id="dlike">0</span>
              </button>
            </div>

Reference: https://stackoverflow.com/questions/359732/why-is-it-considered-a-bad-practice-to-omit-curly-braces?lq=1 — Barmar, Sep 02 '20 at 22:27
Thanks for the answer, I solved the first problem, but the second one did not find a solution for it, and the solution above did not work, so I completely uploaded the code to this link (https://codepen.io/billa-raon/pen/KKzZogJ). The code only works on the first post and I want it to work with everyone, and any post is added to the page .I hope for help if possible and thank you — Billa, Sep 07 '20 at 00:44
@Billa The business rules where not explicit so a made some that looked good for the interface of one user only and that could be extended for a social media item by adding all negative number and taking the absolute value for the thumbs down and adding all positive number for the thumbs up. — Dominique Fortin, Sep 09 '20 at 00:17

Is there anyone helping me to determine the error?

1 Answers1