I need a idea how to solve the following issue.

I'm working on a like/dislike system of a blog posts which remembers what user liked only in the local storage.

The problem is, that when I like the post, button becomes disabled (as it should), but when I reload the page the number of likes increases (the like button remains clicked). How can I solve this ?

---

<!-- Likes button -->   
                    <button id="likebtn" type="button">                  
                            <input type="number" id="input1" value ="<?php echo $post_likes;?>"</input>    
                    </button>


                    </p>
                        <script>
                            let likebtn = document.querySelector('#likebtn');
                            let input = document.querySelector('#input1'); 

                            //local storage - saving ID of liked post
                            var likedID = parseInt('<?php echo $link_post_id ?>');
                            var likedIDhistory = JSON.parse(localStorage.getItem("arrayOfLikedPosts")) || [];
                            var isLiked = false;

                            for (var i = 0; i < likedIDhistory.length; i  ){
                                var arrayLS = JSON.parse(localStorage["arrayOfLikedPosts"]);
                                var actual = arrayLS[i];
                                
                                if(likedID == actual) {
                                    isLiked= true;
                                    console.log("true");
                                }                            
                            }

                            //if is not liked by "user"
                            if (isLiked == false) {                                                       
       
                            likebtn.addEventListener('click', likes_function=>
                            {
                            input1.value = <?php echo $post_likes?>   1;
                            input.style.color = "#a1c4fd";

                            <?php
                            $like_query = "UPDATE posts SET post_likes_count=post_likes_count  1 WHERE post_id=$link_post_id";
                            $send_query2 = mysqli_query($connection, $like_query);

                            $query2 = "SELECT * FROM posts WHERE post_id=$link_post_id";
                            $like_post_query = mysqli_query($connection, $query2);
                            ?>  

                            likedIDhistory.push(likedID);
                            localStorage.setItem("arrayOfLikedPosts", JSON.stringify(likedIDhistory));
                            document.getElementById("likebtn").disabled = true;
                            document.getElementById("likebtn").style.opacity=0.5; 
                         });


                            //if is already liked by "user"
                            } else {
                                document.getElementById("likebtn").disabled = true;
                                document.getElementById("likebtn").style.opacity=0.5;
                            }                  

                        </script>

---

CodePudding user response：

To accomplish this task you need to add the following code in your file for like and dislike and saving in Local Storage

$(".like-btn").click( function() {

    $(this).toggleClass('clicked');
  event.preventDefault();

});



$(".panel-group_btn span").click(function(){
                       var btnStorage = $(this).attr("id");

                        if($(this).hasClass("clicked")) {
                            localStorage.setItem(btnStorage, 'true');
                        } else {
                            localStorage.removeItem(btnStorage, 'true');
                        }

                    });


                    $( ".panel-group_btn span" ).each(function() {
                      var mainlocalStorage = $( this ).attr( "id" );

                      if(localStorage.getItem(mainlocalStorage) == 'true') {
                        $(this).addClass("clicked");
                    } else {
                        $(this).removeClass("clicked");
                    }



                    });

body, a {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; text-decoration:none;
}


a.panel-group_btn {color: #888;display:block;}

a.like-btn {
    color: #888;
    font-size: 14px;
}


span.clicked {
  color: #00dfae; 
  font-weight:bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Like button</h1>

<p>Uses the span's id to name the Local Storage key. Check Local Storage in your inspector to see the saved keys.</p>

<a  class="panel-group_btn" href="#" >
    <span id="like-01" class="like-btn">
    Like
    </span>
</a>

<a  class="panel-group_btn" href="#" >
    <span id="like-02" class="like-btn">
    Like
    </span>
</a>

<a  class="panel-group_btn" href="#">
    <span id="like-03" class="like-btn">
    Like
    </span>
</a>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Pls upvote my answer if you get any help!

CodePudding user response：

In your script tag you have a <?php code which always updates the like count:

<?php
  $like_query = "UPDATE posts SET post_likes_count=post_likes_count  1 WHERE post_id=$link_post_id";
  $send_query2 = mysqli_query($connection, $like_query);

  $query2 = "SELECT * FROM posts WHERE post_id=$link_post_id";
  $like_post_query = mysqli_query($connection, $query2);
?>  

The PHP code is always executed - it does not know you are within the if statement in JavaScript. PHP and JavaScript do not work with each other that way.
This is why it is always counting up.

You can send the click to another PHP script which counts the value up and refreshes the button.