CODEWITHSUNDEEP
javascript
Michael
Michael

Reputation: 13616

Created dynamically combobox not working

I create combobox dynamically using javascript.

Here the code(or here!!!):

function CreateComboBox() {

 var selectElem = document.createElement('select');  
 var optionElem0 = document.createElement('option');
 var optionElem1 = document.createElement('option');
 var optionElem2 = document.createElement('option');
 var optionElem3 = document.createElement('option');
 var optionElem4 = document.createElement('option');

 selectElem.onchange = 'myFunction()';

 optionElem0.value=10;
 optionElem0.innerHTML="10";

 optionElem1.value=15;
 optionElem1.innerHTML="15";

 optionElem2.value=20;
 optionElem2.innerHTML="20";

 optionElem3.value=25;
 optionElem3.innerHTML="25";

 optionElem4.value=50;
 optionElem4.innerHTML="50";

 selectElem.appendChild(optionElem0);
 selectElem.appendChild(optionElem1);
 selectElem.appendChild(optionElem2);
 selectElem.appendChild(optionElem3);
 selectElem.appendChild(optionElem4);

 document.getElementById('ComboArea').appendChild(selectElem); 
}

function myFunction() {alert('HELLO!');}

After combobox is created if I select a element from the created combo I want the myFunction() to be fired.But it not work, the function myFunction() not fired any idea why?What I'm doing wrong?

Upvotes: 0

Views: 83

Answers (5)

pid
pid

Reputation: 11597

Don't assign a string but simply the function name:

selectElem.onchange = myFunction;

You should use a function like this:

function addOption(node, text, value)
{
    var option;

    option = document.createElement("option");
    option.text = text;
    option.value = value;
    node.appendChild(option);
}

You can then add options with ease:

function CreateComboBox(func)
{
    var node;

    node = document.createElement("select");
    addOption(node, "10", 10);
    addOption(node, "15", 15);
    addOption(node, "20", 20);
    addOption(node, "25", 25);
    addOption(node, "30", 30);

    node.onchange = func;

    return node;
}

document.getElementById('ComboArea').appendChild(CreateComboBox(myFunction));

There are many points I improved on. Just try to find them and remember them while moving on. Over time you'll understand and use better what Javascript has to offer.

Upvotes: 2

John Weisz
John Weisz

Reputation: 31924

You might want to use the concept of an anonymous function referenced by a variable:

var myFunction = function () {
    alert('HELLO!');
}

It is marginally faster than passing a variable name by string. Call it the following way:

selectElem.onchange = myFunction;

That is because element.onchange accepts a handler function. Additionally, you could just pass the function itself to onchange very similarly:

selectElem.onchange = function () {
    alert('HELLO!');
}

But the first solution is more preferable in my opinion for reuse at the cost of one extra variable.

Also note that a handler function can always accept the event itself as a parameter:

selectElem.onchange = function (e) {
    alert(e.target.className);
}

Upvotes: 1

Manoj Sharma
Manoj Sharma

Reputation: 616

Well, I found the solution.

Just replace

selectElem.onchange = 'myFunction()';

with

selectElem.onchange = myFunction;

Upvotes: 3

Amy
Amy

Reputation: 4032

Bind myFunction() to onchange event of combo-box using .setAttribute function

selectElem.setAttribute('onchange', 'myFunction()');

Upvotes: 2

Yash
Yash

Reputation: 182

You need to assign a function not a string 'myFunction()' to the onchange attribute

selectElem.onchange = myFunction;

Upvotes: 2

Related Questions