Javascript function in HTML tag generated by javascript

Question

Possible Duplicate:
Create a link with javascript within it

I am trying to put a function into HTML tag which I am generating by javascript.

What I've got:

<script type="text/javascript">
    var html = '';
    html += '<div><a href="#" onclick="showBlock("#idTextBlocks");">Show Text Blocks</a></div>';
</script>

The showBlock("#idTextBlocks"); is the JQuery function which takes the ID of the component which needs to be show once the link is clicked.

function showBlock(id) {
    $(id).show('slow');
}

The problem is that it is not working. It gets generated into:

<a #idtextblocks");"="" onclick="showBlock(" href="#">Show Text Blocks</a>

I've tried to change the quotes into ' singe: onclick="showBlock('#idTextBlocks'); but this just breaks all my javascript.

So the question is how to correctly pass a function into HTML <a> tag's onclick attribute if the tag itself is generated with javascript?

Since you're using jQuery you shouldn't be creating your HTML that way in the first place, nor attaching your event handlers. — Pointy, Nov 23 '12 at 16:10

score 1 · Answer 1 · answered Nov 23 '12 at 16:07

1

You need to to using combination of single and double quote

change

onclick="showBlock("#idTextBlocks");"

to

onclick="showBlock('#idTextBlocks');"

Instead of passing id to function you can access the required element in funciton like this,

function showBlock() {
    $('#idTextBlocks').show('slow');
}

answered Nov 23 '12 at 16:07

Adil

146,340
25
209
204

Yes but then I will have to create three functions, because I have three links. So I'd rather pass the element's id to the function. – Nov 23 '12 at 16:08
1

I've already tried single quotes. Please read the question properly. – Nov 23 '12 at 16:10
You can't just put single quotes in a literal string delimited by single quotes. You need a backslash in front of every single quote in the string. – bart Nov 23 '12 at 16:13

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Use `"` for this:

I have come across the same issue and have fixed it by replacing " with ", which is safer than using \".

<script type="text/javascript">
    var html = '';
    html += '<div><a href="#" onclick="showBlock(&quot;#idTextBlocks&quot;);">Show Text Blocks</a></div>';
</script>

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 23 '12 at 16:09

Praveen Kumar Purushothaman

164,888
24
203
252

1

I am waiting until I can :) Why I have to wait? It doesn't allow me to accept the answer. Still 1 minute left. – Nov 23 '12 at 16:18
It is by default not to misuse the system of StackOverflow. :) – Praveen Kumar Purushothaman Nov 23 '12 at 16:20
http://meta.stackexchange.com/questions/85521/why-does-stackoverflow-make-you-wait-2-x-minutes-before-you-can-accept-an-answer and http://meta.stackexchange.com/questions/47814/why-do-you-have-to-wait-8-minutes-before-you-can-accept-an-answer – Praveen Kumar Purushothaman Nov 23 '12 at 16:21

score 1 · Answer 3 · answered Nov 23 '12 at 16:12

1

You're using jQuery anyway:

var $content = $('<div/>')
  .append('<a/>', {
    href: '#',
    click: function() { showBlock('#idTextBlocks'); },
    text: 'Show Text Block'
  });

Now you can append/prepend $content wherever you like.

answered Nov 23 '12 at 16:12

Pointy

405,095
59
585
614

score 0 · Answer 4 · edited Nov 23 '12 at 16:30

0

Try this:

<script type="text/javascript">
    var html = '<div><a href="#" onclick="javascript:showBlock(\'#idTextBlocks\');">Show Text Blocks</a></div>';
</script>

edited Nov 23 '12 at 16:30

bluish

26,356
27
122
180

answered Nov 23 '12 at 16:10

Marco Francke

160
6

1

Dude... Doesn't work. See it gets escaped at `'#idTextBlocks'` – Praveen Kumar Purushothaman Nov 23 '12 at 16:10

score 0 · Answer 5 · answered Nov 23 '12 at 16:18

html = '<div><a href="#" onclick="showBlock("#idTextBlocks");">Show Text Blocks</a></div>';

Try to remove the + operator when inserting value in your html variable, it has nosense since you just declared html as an empty string, especially a text one. (+= operator is most oftenly used to add value to a previous value eg

a = 1; 
a += 2; 
alert(a) //alerts 3

Javascript function in HTML tag generated by javascript

5 Answers5

Use `"` for this:

Linked

Javascript function in HTML tag generated by javascript

5 Answers5

Use &quot; for this:

Linked

Use `"` for this: