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>

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

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

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


             }else if (image.getAttribute('src') == "images/unfav.png"){


@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.

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

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

@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.

@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?

17 Answered Questions

[SOLVED] Returning JSON from a PHP Script

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

20 Answered Questions

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

  • 2014-05-19 14:37:56
  • Madara's Ghost
  • 741954 View
  • 651 Score
  • 20 Answer
  • Tags:   javascript php

2 Answered Questions

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

7 Answered Questions

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

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