[SOLUCIONADO] Evento DOM en formulario dinamico

[danikene]

Hola amigos, No tengo mucha experiencia trabajando con el DOM y luego de darme cabezazos me encuentro en un laberinto

tengo un select dentro de un formulario dinámico y que me lleva a una función javascript

Código Javascript:

seleccion_2=document.createElement('select');
                seleccion_2.name='cant_nino'+i;
                seleccion_2.id='cant_nino'+i;
                seleccion_2.onchange=nenos();
 

tengo varias interrogantes.
* A diferencia de Javascript no se acá como obtener el id y el valor de este campo para enviarlo a la función (intente colocando this.options[selectedIndex].value pero no funciona)
* Cuando reviso el DOM en el navegador no me aparece el evento onchange en cada select cant_nino.
*Al crearse el formulario dinamico la función nenos se ejecuta tantas veces como se crea el select cant_nino cosa que pudiera solucionar si pudiera obtener el valor y el nombre del select y si el evento onchange permaneciera en el campo cant_nino

Agradecería toda la ayuda que me puedan dar. Saludos

[PHPeros]

Nominado al error más común de JavaScript

Código:

// Incorrecto:
seleccion_2.onchange=nenos();

// Correcto: 
seleccion_2.onchange=nenos;

No puedes poner los paréntesis a la función, sino ésta se ejecutará al leerla y no guardará ningún valor para el evento.

[danikene]

Hola PHPeros, gracias por tu respuesta.

Te cuento que si le quito el paréntesis no me ejecuta la función , y lo otro es por donde le pasaría los parámetros, ahora solo tengo una función de prueba.

Código Javascript:

function nenos(ar){
        alert("si");
}
 

En cambio cuando mantengo el paréntesis se ejecuta la función aunque solo cuando se crea el formulario.

[PHPeros]

Pon el código HTML del formulario.

[danikene]

Fíjate que limpiando el código para enviarte solo el html del formulario sin querer logre que trabajara la función tal como lo necesito, lo único es que no sé como pasarle por parámetros el id del select y la cantidad del mismo.
Te coloco a continuación el código de todas formas de como genero el formulario .

Gracias de nuevo

Código Javascript:

<script type="text/JavaScript">
function nenos(){
    alert("si");
}
 
function agregar(op) {
    restar()
    if(op < 10){
        for(i=1;i<=op;i++ ){
 
            contenedor = document.getElementById('habitacion');
 
            hr = document.createElement('hr');
 
            fila_1 = document.createElement('tr');
            fila_1.id='c_tr1';
 
            fila_2 = document.createElement('tr');
            fila_2.id='c_tr2';
 
            fila_3 = document.createElement('tr');
            fila_3.id='c_tr3';
 
            fila_4 = document.createElement('tr');
            fila_4.id='c_tr4';
 
            fila_5 = document.createElement('tr');
            fila_5.id='c_tr5';
 
            fila_6 = document.createElement('tr');
            fila_6.id='c_tr6';
 
            celda_0 = document.createElement('td');
            celda_0.id = 'cate';
            celda_0.colSpan='1';
            celda_0.innerHTML = "Categor&iacute;a "
            celda_0.setAttribute("align","center");
 
            celda_1 = document.createElement('td');
            celda_1.id = 'c_ti_2';
            celda_1.colSpan='2';
            celda_1.innerHTML = "Habitacion #"+i
            celda_1.setAttribute("align","center");
 
            celda_2 = document.createElement('td');
            celda_2.id = 'c_ti_hab';
            celda_2.innerHTML = "Cant. Adultos"
            celda_2.setAttribute("align","center");
 
            celda_3 = document.createElement('td');
            celda_3.id = 'c_ti_hab2';
            celda_3.innerHTML = "Cant. Ni&ntilde;os"
            celda_3.setAttribute("align","center");
 
            celda_4 = document.createElement('td');
            celda_4.id = 'c_select';
            celda_4.setAttribute("align","center");
 
 
            celda_5 = document.createElement('td');
            celda_5.id = 'c_ti_eda1';
            celda_5.innerHTML = "edad 1ro"
            celda_5.setAttribute("align","center");
 
            celda_6 = document.createElement('td');
            celda_6.id = 'c_select';
            celda_6.setAttribute("align","center");
 
            celda_10 = document.createElement('td');
            celda_10.id = 'c_ti_eda2';
            celda_10.innerHTML = "edad 2do"
            celda_10.setAttribute("align","center");
 
            celda_11 = document.createElement('td');
            celda_11.id = 'c_select';
            celda_11.setAttribute("align","center");
 
 
 
            celda_7 = document.createElement('td');
            celda_7.id = 'c_select';
            celda_7.setAttribute("align","center");
 
            celda_8 = document.createElement('td');
            celda_8.id = 'c_select';
            celda_8.setAttribute("align","center");
 
            celda_9 = document.createElement('td');
            celda_9.id = 'c_ti_2';
            celda_9.colSpan='3';
            celda_9.setAttribute("align","center");
 
            seleccion_0=document.createElement('select');
            seleccion_0.name='categoria'+i;
            seleccion_0.id='categoria'+i;
 
            seleccion_1=document.createElement('select');
            seleccion_1.name='cant_adultos'+i;
            seleccion_1.id='cant_adultos'+i;
 
            seleccion_2=document.createElement('select');
            seleccion_2.name='cant_nino'+i;
            seleccion_2.id='cant_nino'+i;
            seleccion_2.onchange=nenos;
 
            seleccion_3=document.createElement('select');
            seleccion_3.name='edad1_'+i;
            seleccion_3.id='edad1_'+i;
 
            seleccion_4=document.createElement('select');
            seleccion_4.name='edad2_'+i;
            seleccion_4.id='edad2_'+i;
            seleccion_4.style.display="none";
 
            for(e=0;e<=3;e++ ){
                opcion_1 = document.createElement('option');
                opcion_1.innerHTML = e;
                opcion_1.value = e;
                seleccion_1.appendChild(opcion_1);
            }
 
            for(e=0;e<=2 ;e++ ){
                opcion_2 = document.createElement('option');
                opcion_2.innerHTML = e;
                opcion_2.value = e;
                seleccion_2.appendChild(opcion_2);
            }
            for(e=0;e<=12 ;e++ ){
                opcion_3 = document.createElement('option');
                opcion_3.innerHTML = e;
                opcion_3.value = e;
                seleccion_3.appendChild(opcion_3);
            }
            for(e=0;e<=12 ;e++ ){
                opcion_4 = document.createElement('option');
                opcion_4.innerHTML = e;
                opcion_4.value = e;
                seleccion_4.appendChild(opcion_4);
            }
            celda_4.appendChild(seleccion_0);
            celda_6.appendChild(seleccion_3);
            celda_7.appendChild(seleccion_1);
            celda_8.appendChild(seleccion_2);
            celda_11.appendChild(seleccion_4);
            celda_9.appendChild(hr);
 
            fila_1.appendChild(celda_1);
            fila_2.appendChild(celda_0);
            fila_2.appendChild(celda_2);
            fila_2.appendChild(celda_3);
            fila_2.appendChild(celda_5);
            fila_2.appendChild(celda_10);
            fila_3.appendChild(celda_4);
            fila_3.appendChild(celda_7);
            fila_3.appendChild(celda_8);
            fila_3.appendChild(celda_6);
            fila_3.appendChild(celda_11);
            fila_4.appendChild(celda_9);
 
 
            contenedor.appendChild(fila_1);
            contenedor.appendChild(fila_2);
            contenedor.appendChild(fila_3);
            if (i != op ){
                contenedor.appendChild(fila_4);
            }
            var o=i;
 
        }
    } else {
        alert("+9");
    }
}
function acero(){
 
    document.getElementById('habitacion').value=0;
    document.getElementById('habitaciones').value=0;
 
}
function restar(){
    for(e=0;e<=40;e++ ){
        try {
            document.getElementById('habitacion').deleteRow(0);
        }
        catch (err) {}
    }
}
 
</script>
 

y el html

Código HTML:

<form action="#" method="post" name="form_cot" id="form_cot">
                <div style="display:table; width: 600px"  >
                    <div >
                        <div style="float:left" valign="top" >
 
                                    <div style="display:table; width: 600px;">
                                        <div style="padding-top: 11px; padding-bottom: 17px; border-bottom: 1px silver solid">
                                            <div style="float:left; width:32%" align="center">
                                                <select onChange="agregar(this.options[selectedIndex].value)" name="habitaciones" id="habitaciones">
                                                    <option value="0" selected="selected">0</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
 
                                                </select>
                                            </div >
                                        </div>
                                    </div>
                                </div>
                                <div >
                                    <div style="float:left" width="7" height="0" >&nbsp;</div >
                                    <div style="float:left" width="310" height="0" align="center" >
 
                                        <table style="width: 600px"  border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
                                            <tbody id="habitacion">
                                            </tbody>
                                        </table>
                                    </div >
                                </div>
                            </div>
                        </div>
                    </div >
                </div>
            </form>
 

[PHPeros]

Muy bien

Lo normal es NO pasar parámetros, ya que es una función exclusiva para el evento. No obstante también puedes hacer así:

Código:

seleccion2.onchange = function(){nenos(parametro1,parametro2...)};

Saludos

[danikene]

Muchisimas Gracias PHPeros ya logre solucionar, tal come me dijiste lo hice así.

Código Javascript:

seleccion_2.onchange=function(){nenos(this.options[this.selectedIndex].value,this.id)};