By Sayyed Rizwan


2019-11-08 14:15:19 8 Comments

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>

3 comments

@Qirel 2019-11-09 11:16:38

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>

@Sayyed Rizwan 2019-11-09 12:19:06

lovely thank you..... it worked... you used element to define in JS thankss...

@Anis R. 2019-11-08 14:21:41

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");

@Anis R. 2019-11-08 14:33:06

Why the downvote?

@Qirel 2019-11-08 14:58:10

I haven't voted up or down, but using a class and then using document.getElementsByClassName("fav") would probably break the logic - you would need to use this element. And since there can be more than 1 row here, we're probably looking at a flawed PHP logic too - either its a query within a loop, or its X rows for favorites, and 1 row if no favorite exist.

@Sayyed Rizwan 2019-11-09 07:28:59

not its not working ...... any other idea

@Christoffer 2019-11-08 14:20:01

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

Related Questions

Sponsored Content

12 Answered Questions

[SOLVED] Why don't self-closing script elements work?

2 Answered Questions

[SOLVED] How to check really width with "auto" value on css

7 Answered Questions

[SOLVED] How does PHP 'foreach' actually work?

19 Answered Questions

[SOLVED] How do I pass variables and data from PHP to JavaScript?

  • 2014-05-19 14:37:56
  • Madara Uchiha
  • 716947 View
  • 641 Score
  • 19 Answer
  • Tags:   javascript php

17 Answered Questions

[SOLVED] Returning JSON from a PHP Script

  • 2010-10-31 18:23:54
  • Scott Nicol
  • 943014 View
  • 805 Score
  • 17 Answer
  • Tags:   php json header

14 Answered Questions

[SOLVED] How does data binding work in AngularJS?

1 Answered Questions

How to call element.onload inside AJAX sucess function?

1 Answered Questions

[SOLVED] javascript onclick, anonymous function

1 Answered Questions

post and update value of checkbox using ajax

Sponsored Content