CODEWITHSUNDEEP
javascriptphpmysql
user10351180
user10351180

Reputation:

Script IF ELSE is only working on first data in php

I can only like the first post not second or third or other...

The image is only changing on the first post.. and other they are not working... 

        $sqkl = "SELECT id FROM favourite WHERE userid='$mainuserid' AND photoid='$photoid' ";
        $rersult = $conn->query($sqkl);

        if ($rersult->num_rows > 0) {
            // output data of each row
            while($rkow = $rersult->fetch_assoc()) {

                ?> 
           <img id="fav" style="float:right;" id="fav" onclick="myFav()" src="images/fav.png" height="22" width="22"> </div>

        <?php
            }
        } else {
           ?>  <img id="fav" style="float:right;" onclick="myFav()" src="images/unfav.png" height="22" width="22"> </div> <?php
        } 

        ?>
 <script>
  var image =  document.getElementById("fav");

    function myFav() {
          if (image.getAttribute('src') == "images/fav.png")
            {

             document.getElementById('fav').src='images/unfav.png';

             }else if (image.getAttribute('src') == "images/unfav.png"){
            document.getElementById('fav').src='images/fav.png';
            }
      }
 </script>

Upvotes: 1

Views: 88

Answers (3)

Qirel
Qirel

Reputation: 26450

You should instead of using IDs, use onclick="myFav(this)", thereby passing that exact element into the function. You can use that argument directly instead.

Your query is also vulnerable to SQL injection, and you should use a prepared statement instead.

It would also appear to me as though you're running this query inside another query-loop - if that's the case, you should instead get this query integrated into the outer query, as a query within a loop is bad for performance.

<?php 
$stmt = $conn->prepare("SELECT id FROM favourite WHERE userid=? AND photoid=?");
$stmt->bind_param("ii", $mainuserid, $photoid);
$stmt->execute();
$stmt->bind_result($id);
if ($stmt->fetch()) {
    ?>
    <img style="float:right;" onclick="toggleFavorite(this)" src="images/fav.png" height="22" width="22"> </div>
    <?php 
} else {
    ?>
    <img style="float:right;" onclick="toggleFavorite(this)" src="images/unfav.png" height="22" width="22"> </div>
    <?php 
}
$stmt->close();

<script>
    function toggleFavorite(element) {
        if (element.getAttribute("src") === "images/fav.png") {
            element.src = "images/unfav.png";
        } else {
            element.src = "images/fav.png";
        }
    }
</script>

Upvotes: 0

Anis R.
Anis R.

Reputation: 6912

In your PHP's while loop, you are adding several images with the same ID of "fav". However, as IDs must be unique, your Javascript code:

var image =  document.getElementById("fav");

Will always return the first image, because it assumes there is only one document with this ID.

What you can do instead is to use a class name of "fav" (rather than ID), and then use the below code to get a list of all images:

var images =  document.getElementsByClassName("fav");

Upvotes: 2

Chris
Chris

Reputation: 424

The reason your code is not working, is because all images have the same ID. ID's are unique identifiers, and document.getElementById("fav"); will only select the first element with that ID.
You can use the this keyword in the myFav function to reference the clicked image

Upvotes: 2

Related Questions