how to pass a variable with / as a parameter in javascript onclick function

Question

I have some path which is set to a variable

var imagepath = "../Resources/Images/teamLogo1.png";

Now on click of an image I have to pass this as a parameter in its onclick function

Please check the fiddle here

I am appending the image and i need to write onclick function there EDIT: Including the full code

$(document).ready(function(){
var imagepath = "../Resources/Images/teamLogo1.png";
    $("#Testing").append('<img src="http://www.magerempowerment.com/v2/blog/wp-content/uploads/2012/07/doubt_dice.jpg" onClick="testfunction('+ imagepath + ')">');

});

function testfunction(imagepath){
alert(imagepath);
};

Please copy the relevant code here; now one needs to see the fiddle to understand at all what you were asking. — Antti Haapala
– Antti Haapala, Commented Oct 8, 2013 at 6:28

Arun P Johny · Accepted Answer · 2013-10-08 06:23:59Z

2

Since the value is a string, you need to enclose it with ''

$(document).ready(function () {
    var imagepath = "../Resources/Images/teamLogo1.png";
    $("#Testing").append('<img src="http://www.magerempowerment.com/v2/blog/wp-content/uploads/2012/07/doubt_dice.jpg" onClick="testfunction(\'' + imagepath + '\')">');

});

function testfunction(imagepath) {
    alert(imagepath);
};

Demo: Fiddle

answered Oct 8, 2013 at 6:23

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Antti Haapala · Accepted Answer · 2013-10-08 06:33:12Z

1

Do not embed handlers in HTML code at all.

$(document).ready(function(){
    var imagepath = "../Resources/Images/teamLogo1.png",
        img = $('<img src="http://.../doubt_dice.jpg">');
    img.click(function () {
        // you can refer to imagepath here, for example
        $(this).prop('src', imagepath);

        // or call your function:
        testfunction.call(this, imagepath);
    });
    img.appendTo("#Testing");
});

Notice however that the relative paths ("../Resources/Images/teamLogo1.png") are always relative to the HTML document.

answered Oct 8, 2013 at 6:33

Antti Haapala

135k23 gold badges297 silver badges349 bronze badges

Comments

Alex · Accepted Answer · 2013-10-08 06:25:17Z

1

Use .prop

$('img').click(function(){
   alert($(this).prop('src')); 
});

answered Oct 8, 2013 at 6:25

Alex

1,30411 silver badges20 bronze badges

Comments

Rohan Kumar · Accepted Answer · 2013-10-08 06:38:15Z

1

Your function will not call because you are creating img dynamically so try it like ,

HTML

$("#Testing").append('<img src="http://../doubt_dice.jpg" data-path="'+imagepath+'">');

SCRIPT

$(document).on('click','img',function(){
    console.log($(this));
    alert($(this).data('path'));
});

Fiddle

edited Oct 8, 2013 at 6:38

answered Oct 8, 2013 at 6:29

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Collectives™ on Stack Overflow

how to pass a variable with / as a parameter in javascript onclick function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related