insert javascript function in html code

Question

I need to associate a dynamic javascript function with checkbox along with other data in an array. For example. I have the following javascript array:

var arr = ['hello', 'world'];
arr.unshift('buddy');
var index = 1;
arr.unshift('<input type="checkbox" id = "' + index + '" onchange="boxChange(" + index + ")>');

The first element in the above array is a checkbox that has an onchange event. The event triggers the function boxChange that has the index passed in.

but the above checkbox event doesn't work, I guess the syntax (quotes) is not right. I need some help with correcting the "quotes". Thanks

I have an imcomplete code written in jsFiddle here http://jsfiddle.net/qq0dsz0f/

is there a reason for inline event handlers rather then in a unobtrusive style? — atmd, Jan 06 '15 at 14:59
it looks like you already know how to concatenate a string in js, so do the same for second `index` variable. But your quotes are mismatching anyway... — A. Wolff, Jan 06 '15 at 15:00
Inspect the html itself in console, will see your quotes are breaking. Use proper escaping and matching. The syntax highlighting of code in your question should also be a clue — charlietfl, Jan 06 '15 at 15:01

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Generally speaking, mixing markup and logic is not a good idea. You can see for yourself -- as soon as you start wanting to manipulate the DOM in non-trivial ways, things get really hairy, really fast. You shouldn't have to worry about getting your quotes right, and you don't have to!

jQuery allows you to create an element on its own, then attach various event handlers to it and then store it, add it to your document, etc.

// First, let's create the element itself.
var element = $('<input type="checkbox" id="' + index + '">");

// Now, let's attach the logic.
element.on('change', function() {
    alert(index);
});

// Now do whatever you want with 'element'.

Isn't this syntax much cleaner?

Secondly, if you happen to use this inside a loop, you might get some strange behavior because of how the function captures the value of `index'. If this is the case you might want to see this question on capturing variables in JavaScript.

edited May 23 '17 at 11:57

Community

1
1

answered Jan 06 '15 at 15:07

Andrei Bârsan

3,473
2
22
46

1

Actually it could get even cleaner if you used a delegate. Then you only need to attach the handler once: `$('#table1').on('change', 'input[type="checkbox"]', function (e) { alert($(this).attr('id')); }` – prodigitalson Jan 06 '15 at 15:13
That's an even cleaner one. Neat! – Andrei Bârsan Jan 06 '15 at 15:13
Additionally you should mention he cannot use only a number for (ie. the index) for his id attribute... it needs to start with a letter... so something like `checkbox-1` would be fine but just `1` is not. – prodigitalson Jan 06 '15 at 15:14
1

@prodigitalson that's not true in html5 spec, numeric ID's are allowed – charlietfl Jan 06 '15 at 15:20
@charlietfl interesting... I did not know that. I haven't actually reviewed the spec in full just some of the newer features. Very good to know though for the record I think i would avoid it without a prefix it could get confusing with nothing else in the `id`. – prodigitalson Jan 06 '15 at 15:28
@prodigitalson I know of one heavily used plugin, jQGrid , that has used numeric ID's for years. Although html4 said they weren't valid, I've never seen an issue if they were used – charlietfl Jan 06 '15 at 15:35
@charlietfl I don't think that I have ever seen an issue either in the browser... I seem to remebr having issues once with different DOM libraries though, but i think it was just an issue with document validation. Its been awhile since i never use them in my own code. – prodigitalson Jan 06 '15 at 15:55

insert javascript function in html code

1 Answers1