CODEWITHSUNDEEP
javascriptjquery
user1788736
user1788736

Reputation: 2845

how to use clickable image button inside div and call a js script function once image is clicked?

i added a click-able image button near an image thumbnail but for some reason the image is not click able and it doesn't pass any value to function it calls(postLike function). Here i got and example in js fiddle:

http://jsfiddle.net/ymdPa/

could any one look at it and tell me why my clickable image button is not firing ?

part of the code that has the clickable button :

<div id='like"+pageurl+"' style='float: right; padding: 5px 2px 2px;'> <img class='liker' onclick=postLike("+imageurl+","+username+","+albumPicurl+","+userid+","+pageurl+","+time+","+text+") src='"+likeimage+"' border='0'></div>

edited: once the user click the button i want to change the button image and the function it calls to something different like below but it doesn't work!(code below doesn't*strong text* replace the image button )

$('like+e+').html(" <img class='lb-liked' onclick='deleteLikeLB(&quot;" + a + "&quot;,&quot;" + b + "&quot;,&quot;" + c + "&quot;,&quot;" + d + "&quot;,&quot;" + e + "&quot;,&quot;" + f + "&quot;,&quot;" + g + "&quot;)' src='http://www.peppertt.com/wp-2013/wp-content/uploads/2011/06/Facebook-like-not.jpg' title='like' border='0' />");

code:

function postLike(a, b, c, d, e, f, g) {
  alert("Hello World!");
  alert("imageURL:" + a + "\nuserName:" + b + "\nalbumPicurl:" + c + "\nuserId:" + d + "\nPageURL:" + e + "\nTime:" + f + "\nText:" + g);
  $('like+e+').html(" <img class='lb-liked' onclick='deleteLikeLB(&quot;" + a + "&quot;,&quot;" + b + "&quot;,&quot;" + c + "&quot;,&quot;" + d + "&quot;,&quot;" + e + "&quot;,&quot;" + f + "&quot;,&quot;" + g + "&quot;)' src='./liked.png' title='like' border='0' />");
}
var imageurl = "http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG";
var username = "tim";
var albumPicurl = "http://somesite.com/albumpic.jpg";
var userid = "3453454545";
var pageurl = "http://somesite.com/page2.html";
var time = "34534545435";
var text = "lifeiscool";
var fullname = "smith";
var likeimage = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTyTZ5jtJ3VxrorGg0ywxXfEstaZWce2he-_6LSgFwsnch6xYUm";
$(".content").append("<div id='grid-cell' style='padding:5px'><a style='text-decoration:none' href='./dl.php?name=brian&imageurl=" + imageurl + "'><img class='photo-grid' src='" + imageurl + "' width=200 height=200 title='" + username + "' /></a><div id='like" + pageurl + "' style='float: right; padding: 5px 2px 2px;'> <img class='liker' onclick=postLike(" + imageurl + "," + username + "," + albumPicurl + "," + userid + "," + pageurl + "," + time + "," + text + ") src='" + likeimage + "' border='0'></div><div class='moreInfo2'><a style='color:#000;text-decoration:none' href='/" + username + "' target='_blank'>" + userid + "(" + fullname + ")</a></div></div>");


<div class="content"></div>

Upvotes: 0

Views: 692

Answers (2)

nnnnnn
nnnnnn

Reputation: 150050

That's really a horribly formatted bunch of code. If you formatted it with better use of white space (including line breaks) and/or did some basic browser console (console.log()) debugging it would be more obvious that you're creating an inline onclick= attribute that has unquoted string values in it.

Your code produces this string:

<img class="liker" onclick="postLike(http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_S…umpic.jpg,3453454545,http://somesite.com/page2.html,34534545435,lifeiscool)"

...but what you need it to do is produce this string:

<img class='liker' onclick='postLike("http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG","tim","http://somesite.com/albumpic.jpg","3453454545","http://somesite.com/page2.html","34534545435","lifeiscool")'

Note the quotation marks around the string values that are the function parameters? You need to adjust your code so that it produces these quotation marks, perhaps like this:

"onclick='postLike(\"" +imageurl+"\",\""+username+"\",\""+albumPicurl+"\",\""
+userid+"\",\""+pageurl+"\",\""+time+"\",\""+text+"\")'"

Even if you fix that, your fiddle won't work because your postLike() function declaration is inside the default onload wrapper (as specified in the panel on the left), and inline onEvent= attributes can only call global functions.

Working version: http://jsfiddle.net/ymdPa/6/

Since you're using jQuery, why don't you get rid of the inline onclick= and create the handlers with jQuery?

Upvotes: 1

user2226112
user2226112

Reputation:

Wow, what an unreadable mess. No wonder there are syntax errors in there. For example you're not passing strings to the postLike() function. And probably a bunch of other errors which I can't be bothered finding.

<img class="liker" onclick="postLike(http://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG,tim,http://somesite.com/albumpic.jpg,3453454545,http://somesite.com/page2.html,34534545435,lifeiscool)" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTyTZ5jtJ3VxrorGg0ywxXfEstaZWce2he-_6LSgFwsnch6xYUm" border="0">

Upvotes: 0

Related Questions