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

Question

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

http://jsfiddle.net/ymdPa/

Here is 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>

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. The code doesn't 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>

nnnnnn · Accepted Answer · 2013-09-15 23:28:35Z

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?

user2226112 · Accepted Answer · 2013-09-15 23:15:36Z

0

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

answered Sep 15, 2013 at 23:15

user2226112

1 Comment

user1788736 Over a year ago

did you see the demo in jsfiddle site ?i am passing variables to postLink function.Problem is that function call is not correct ! the clickable button on its own outside append work but when i added to append then stops working!! hope some one tell me what part of function call is incorrect !

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related