Question

I am new to javascript.

I have a function I modifed that when a user selects “Yes” from a pull down menu it creates 3 text boxes in a div area.

Here is my form pull down code:

    <select name="dosage" id="dosage" onchange="function dosage(sel)">
            <option value="No">No</option>
            <option value="Yes">Yes</option> 

    </select>
<div id="dosagearea"></div>

This is the javascript I modified which originally created a message box to the user when they selected something.

    function dosage(sel)
{
   if(sel.options.selectedIndex == 0)
   {

      return false;
   }


    else if(sel.options.selectedIndex == 'Yes')
       {
          x=document.createElement('input');
                    x.setAttribute('rows',1);
                    x.setAttribute('cols',20);
                    x.name='dosage_emitted';
                    document.getElementById('dosagearea').appendChild(x);

            x=document.createElement('input');
                    x.setAttribute('rows',1);
                    x.setAttribute('cols',20);
                    x.name='dosage_absorbed';
                    document.getElementById('dosagearea').appendChild(x)


            x=document.createElement('input');
                    x.setAttribute('rows',1);
                    x.setAttribute('cols',20);
                    x.name='dosage_period';
                    document.getElementById('dosagearea').appendChild(x)
       }
    } 

I checked with firebug and no JS errors being returned, I think my function is not being called the right way.

Thanks

Answer 1

The value of the onchange property is basically the name of a function or some JavaScript. If you want to call your function with the select element as a parameter, you need to do

<select name="dosage" id="dosage" onchange="dosage(this)">

Note that this isn’t the recommended way to do things as it couples your HTML with your JS. Instead, try adding the event directly in JS, like so

window.onload = function() {
    document.getElementById("dosage").onchange = dosage;
    function dosasage(event) {
        var sel = event.currentTarget;
    }
}