Creating a HTML DOM select element in Javascript and having an onchange event

Question

I am creating HTML DOM elements using Javascript (yes, I know it's nasty).
I can get the select element created but I cannot add an onchange property.

Example:

var sel = document.createElement('select');
sel.id = 'someID';
sel.title = 'Some title';
sel.style.fontWeight = 'bold';
sel.size = 1;

Once I have added the options and have done a
document.getElementById('someOtherID').appendChild(sel);
I get my select element.

What I want to do is, at A above, add:
sel.onChange = 'someJavascriptFunction()';
but it doesn't like it.

Should I be thinking outside of the square? Which one?

the system · Accepted Answer · 2013-02-24 03:42:15Z

3

The event name should be lowercase, and you need to assign a function instead of a string.

sel.onchange = someJavascriptFunction;

If there's more work to do, you can assign an anonymous function.

              //  v----assign this function
sel.onchange = function() {
    // do some work
    someJavascriptFunction();  // invoke this function
};

answered Feb 24, 2013 at 3:42

the system

9,35642 silver badges47 bronze badges

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

2 Comments

user2103677 Over a year ago

I chose to go down this path and have now run into another problem in as much as the someJavascriptFunction() in the function() scope needs to be generated as a "for" loop, eg:

user2103677 Over a year ago

I chose to go down this path and have now run into another problem in as much as the someJavascriptFunction();'s in the function() scope need to be generated within a "for" loop. I can build the list of functions outside of the function() scope, but how do I get it into the scope.

Andrew Eisenberg · Accepted Answer · 2013-02-24 03:35:32Z

0

You should be doing something like this:

sel.onChange = someJavascriptFunction;

(notice that there are no parens after someJavascriptFunction. This means you are attaching the function, not the invocation of the function.

answered Feb 24, 2013 at 3:35

Andrew Eisenberg

28.9k9 gold badges100 silver badges156 bronze badges

Comments

jthomas · Accepted Answer · 2013-02-24 04:00:09Z

0

If there's a chance you'll be binding multiple functions to that event, you will want to use this slightly more lengthy method.

if (sel.addEventListener) {
    sel.addEventListener('change', changeFunction, false);
} else if (sel.attachEvent) {
    sel.attachEvent('onchange', changeFunction);
} else {
    sel.onchange = changeFunction;
}

edited Feb 24, 2013 at 4:00

answered Feb 24, 2013 at 3:54

jthomas

8586 silver badges19 bronze badges

Comments

OsamaBinLogin · Accepted Answer · 2013-10-17 06:01:20Z

An easier way to do the whole thing is: somewhere already in your page:

then in your javascript do this:

document.getElementById('someContainer').innerHTML = "<select id=someId title='some title' size=1 style='font-weight: bold' onchange='someJavascriptFunction()' >";

or more slowly:

var html = "<select id=someId title='some title' size=1 style='font-weight: bold' onchange='someJavascriptFunction()' >";

var someContainer = document.getElementById('someContainer');

someContainer.innerHTML = html;

The document.getElementById() is so common, you might have a library like jquery or prototype that does that more easily like $('someContainer'), or else define it for yourself (var $ = document.getElementById;).

innerHTML is a pseudo-variable on every dom element that returns, or sets, all the html INSIDE the element you do it on. You can pass it arbitrarily long HTML, the whole page I guess if you want. and you can write a crafty program to build the html text, they even have templating systems like hogan (google it).

Collectives™ on Stack Overflow

Creating a HTML DOM select element in Javascript and having an onchange event

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related