How to pass string in Javascript function dynamically

Question

I have a javascript function like this

function doIt(link) {
    alert(link);
}

And i call this function in below given JS code, where i am creating an a tag and appending it to my html page on runtime:

jQuery.each(data, function (i, val) {
    var card = '<a href="Views/NewsDetail.html" onclick=" doIt(' + val.Img + '); "> \
                <div class=" card"> \
                <img src='+ val.Img + ' /> \
                <p>'+ val.Title + '</p> \
                </div> \
                </a>';
    document.getElementById('News').innerHTML += card;
});

Say for example our val.Img = 'abcd' When i click the a tag it calls doIt(abcd), but i want to call doIt('abcd') passing it as string.

Is there any workaround for this.

Doesn't it redirect to another page Views/NewsDetail.html when you click anchor tag? — Vicky Gonsalves
– Vicky Gonsalves, Commented Sep 25, 2015 at 11:28
Thanx everyone for helping me. though i can only accept one answer but giving +1 for helping me. — Murtaza Munshi
– Murtaza Munshi, Commented Sep 25, 2015 at 11:35

Satpal · Accepted Answer · 2015-09-25 11:30:06Z

2

You need to escape quotes like

var card ='<a href="Views/NewsDetail.html" onclick="doIt(\'' + val.Img + '\'); "> \
                                                        //^               ^

As per your current implementation the argument abcd is treated as variable thus you must be getting undefined

edited Sep 25, 2015 at 11:30

answered Sep 25, 2015 at 11:25

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

2 Comments

Murtaza Munshi Over a year ago

lemme try this and get back to you.

Murtaza Munshi Over a year ago

Yeah exactly it is giving me undefined.

Ivin Raj · Accepted Answer · 2015-09-25 11:42:33Z

2

You can do this one:

var card='<a href="Views/NewsDetail.html;" onClick="Test(\'' + val.Img + '\'); "></a>';

edited Sep 25, 2015 at 11:42

answered Sep 25, 2015 at 11:28

Ivin Raj

3,4312 gold badges34 silver badges70 bronze badges

Comments

rajuGT · Accepted Answer · 2015-09-25 11:40:00Z

1

The below HTML string already used both quotes till the characters doIt(. So any string type values inside the quotes, must be escaped using any of the quote-character.

 var card = '<a href="Views/NewsDetail.html" onclick=" doIt(' + val.Img + '); ">'

to [added quote escape character \"]

 var card = '<a href="Views/NewsDetail.html" onclick=" doIt(\"' + val.Img + '\"); ">'

edited Sep 25, 2015 at 11:40

answered Sep 25, 2015 at 11:26

rajuGT

6,4442 gold badges30 silver badges44 bronze badges

3 Comments

Murtaza Munshi Over a year ago

I am talking about the <a> tag. The <img> tag is working fine. Thanx for helping though.

rajuGT Over a year ago

Oh! corrected to anchor tag. As you know in JS both ' and " are same. Just use the other-quote to escape instead of \quote-char. Code looks clean and easy to track string concat issues.

rajuGT Over a year ago

Sorry, in this case we have to escape the double quote as we have already used both the quotes. so any string inside onclick= " ........ " has to be escaped.

Vicky Gonsalves · Accepted Answer · 2015-09-25 11:34:06Z

0

Yet another option:

   var doItAndRedirect=function(val){
           //do stuff with val here
       window.location = "Views/NewsDetail.html"; 
    }

    jQuery.each(data, function (i, val) {
        var card = '<a href="javascript:doItAndRedirect(\''+ val +'\')">'+
                    '<div class=" card">' +
                    '<img src='+ val.Img + ' />' +
                    '<p>'+ val.Title + '</p>' +
                    '</div>'+
                     '</a>';
        document.getElementById('News').innerHTML += card;
    });

answered Sep 25, 2015 at 11:34

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

Comments

Sunil · Accepted Answer · 2015-09-25 11:27:05Z

-1

It is already a string it just doesn't display '' on alert but at the background it is string only.

answered Sep 25, 2015 at 11:27

Sunil

92915 silver badges25 bronze badges

1 Comment

Sunil Over a year ago

@MurtazaMunshi but you said in your question that function getting called as doIt(abcd);

Community · Accepted Answer · 2017-05-23 12:14:31Z

-1

doIt("' + val.Img + '");

should do it, but if you have, e.g, " inside val.Img you need to quote those: How do I add slashes to a string in Javascript?

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Sep 25, 2015 at 11:28

Kjell Post

195 bronze badges

Collectives™ on Stack Overflow

How to pass string in Javascript function dynamically

6 Answers 6

2 Comments

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related