JavaScript - selectedIndex es nulo o no es un objeto

selectedIndex es nulo o no es un objeto

Publicado por John (3 intervenciones) el 05/07/2005 23:09:20

Hola a todos, Estoy tratando de enviar información de una lista de selección a otra, para esto he creado un botón que llama una función que se llama pasar, sin embargo al darle clic en el botón saca el siguiente error: 'document.elemSelec.selectedIndex' es nulo o no es un objeto. He buscado y no encuentro una solución. El código completo HTML lo anexo a continuación:

<html>
<head>
<script>
function Pasar( )
{
if (document.elemSelec.selectedIndex < 0) document.elemSelec.selectedIndex == 0;
indice = document.elemTec.selectedIndex;
document.elemSelec.add(document.elemTec.options[indice]);
return false;
}

function Quitar( )
{
if (document.elemSelec.selectedIndex < 0) document.elemSelec.selectedIndex == 0;
indice = document.elemSelec.selectedIndex;
document.elemTec.add(document.elemSelec.options[indice]);
return false;
}
</script>

</head>

<body>

<table width="620" height="53" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="215"><select name="elemTec" size="8" multiple id="elemTec" >
<option selected>Micrófono de mano omnidireccional</option>
<option>Micrófono de mano inalámbrico </option>
<option>Micrófono inalámbrico Mixto</option>
<option>Consola de Sonido</option>
<option>Video Beam</option>
<option>Televisor 21"</option>
<option>DVD</option>
<option>Proyector </option>
</select></td>
<td width="74" align="center" valign="middle">
<p>
<input name="btnPasar" type="Submit" id="btnPasar" onClick="return Pasar()" value=">">
</p>
<p>
<input name="btnQuitar" type="submit" id="btnQuitar" onClick="return Quitar()" value="<">
</p>
<p>
<input type="submit" name="Submit2" value="<<">
</p>
</td>
<td width="331"><select name="elemSelec" size="8" id="elemSelec">
<option>Proyector </option>
<option>Video Beam de Alta Resolución</option>
</select></td>
</tr>
</table>
</body>
</html>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

RE:selectedIndex es nulo o no es un objeto

Publicado por Mike79 (49 intervenciones) el 06/07/2005 00:14:02

¿por donde empezamos?

Haber, para empezar, los submit que tienes no deberian ser submit, deberian ser button, cambia el type="submit" por type="button", asi no tienes problemas de que algunos navegadores intenten enviar la información al servidor (como en mi caso, por que no uso IE).

Bueno, seguimos, tu codigo esta mal, por donde quieras mirarlo. Para empezar te falta encerrar todo en un form y ponerle al form un nombre, por ejemplo:
name="frm"

Luego cuando llamas a los elementos del formulario debes poner document.nombredelformulario.nombredelelemento, por ejemplo:
document.frm.elemSelec.selectedIndex

Ahora, el metodo add no existe, ¿de donde lo sacaste?, asi no se agrega elementos a un list, la forma como se agregan seria algo asi como:

lista.options[lista.length] = nuevoobjetooption;

Por ejemplo quedaria asi:

document.frm.elemTec.options[document.frm.elemTec.length] = document.frm.elemSelec.options[indice];

¿Pero que crees? esto funciona bien en Mozilla, pero en Internet Explorer no funciona, ya que segun IE no puedes asignar un objeto que ya esta asignado a otro elemento, por lo tanto primero tendras que crear un objeto nuevo, la forma de crearlo es:

document.frm.elemSelec.options[document.frm.elemSelec.length] = new Option("Nombre","Valor",false,false);

Donde como podras darte cuenta, elemSelec.length le dice que lo ponga hasta el final del arreglo, y se dice que es al final por que si hay 3 elementos se cuentan 0,1,2 elementos, entonces le pides que lo ponga en la posición número 3 que seria el cuarto elemento.

Cuando le dices new Option tienes que especificarle 4 parametros, el primero es el
texto que se muestra en la opción, el segundo es el valor del optión, en tu caso no tienes valores asignados a los options pero tendras que tenerlos, y los siguientes dos indican si el elmento estara seleccionado, y si sera selected por default, la verdad no recuerdo el orden, pero no importa mucho para este ejemplo.

Y bueno, tienes que copiar la información del otro select, asi que quedaria algo asi como:

document.frm.elemSelec.options[document.frm.elemSelec.length] = new Option(document.frm.elemTec.options[indice].text,document.frm.elemTec.options[indice].value,false,false);

Y si te das cuenta, ahora tienes repetido los elementos, asi que tienes que borrar el anterior, para hacerlo tienes que usar:

document.frm.elemTec.options[indice]=null;

Espero haberme explicado bien, si no te perdiste y le entendiste a este relajo, te felicito, tienes aguante, tu función Pasar quedaria asi:

function Pasar() {
if (document.frm.elemSelec.selectedIndex < 0) {
document.frm.elemSelec.selectedIndex == 0;
}
indice = document.frm.elemTec.selectedIndex;
document.frm.elemSelec.options[document.frm.elemSelec.length] = new Option(document.frm.elemTec.options[indice].text,document.frm.elemTec.options[indice].value,false,false);
document.frm.elemTec.options[indice]=null;
}

Claro, suponiendo que el form se llama "frm" y que cambias el type="submit" de los botones por type="button", la función Quitar seria exactamente igual unicamente cambiando de orden los elementos, pero te lo dejo de tarea, y si quieres que a la hora de pasar el elemento se seleccione, cambiale los false a true a la hora de crear el option.

Saludos!
-
Miguel Angel
Mike79

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

RE:selectedIndex es nulo o no es un objeto

Publicado por John (3 intervenciones) el 06/07/2005 03:19:52

Hola Mike, agradezco mucho la solución que me haz dado, ya hice los cambios pertinentes y efectivamente funciona. Acerca del método add, lo reutilicé de un código java script por ahí. Nuevamente agradezco el tiempo dedicado a solucionar este problema.

Att. John Martínez

Valora esta respuesta

Comentar

RE:selectedIndex es nulo o no es un objeto

Publicado por Victor (1 intervención) el 22/11/2007 23:02:18

Hola,

tengo un problema similar. Estoy usando una funcion para "dibujar" los botones de un formulario. La vengo usuando en todos mis scripts, pero solamente en uno tengo problemas. En Mozilla Firefox funciona bien, pero en IE arroja el error "document.form.enviar es nulo o no es un objeto" únicamente en una de las páginas.

La funcion botones() es :
function botones(){
global $usuario_id,$trad,$SALVAR,$BUSCAR,$LISTAR,$NUEVO,$IMPRIMIR,$BORRAR, $id_tabla, $permite_borrar;
if (!$IMPRIMIR){ $IMPRIMIR="N";}

if (!$SALVAR){echo" <td align=center width=80 class=tbutton style=\"cursor:hand\" onclick=\"document.form.enviar.value ='SALVAR';document.form.submit(); \">".diccionario($idioma_id,'str_boton_salvar')."</td><td> </td>"; }
if (!$BUSCAR){echo" <td align=center width=80 class=tbutton style=\"cursor:hand\" onclick=\"document.form.enviar.value ='BUSCAR';document.form.submit(); \">".diccionario($idioma_id,'str_boton_buscar')."</td><td> </td>"; }
if (!$LISTAR){echo" <td align=center width=80 class=tbutton style=\"cursor:hand\" onclick=\"document.form.enviar.value ='LISTAR';document.form.submit(); \">".diccionario($idioma_id,'str_boton_listar')."</td><td> </td>"; }
if (!$NUEVO) {echo" <td align=center width=80 class=tbutton style=\"cursor:hand\" onclick=\"document.form.enviar.value ='NUEVO';document.form.submit(); \">".diccionario($idioma_id,'str_boton_nuevo')."</td><td> </td>"; }
if (!$IMPRIMIR) {echo" <td align=center .width=80 class=tbutton style=\"cursor:hand\" onclick=\"window.print(); \"><img src=/img/imprimir.gif></td><td> </td>"; }
if ($BUSCAR && !$LISTAR){
if (!$BORRAR){echo" <td align=center width=80 class=tbutton style=\"cursor:hand\" onclick=\"if (confirm('".diccionario($idioma_id,'str_msg_seguro_que_borra')."?')){ document.form.enviar.value = 'BUSCAR';document.form.accion.value = 'BORRAR';document.form.submit();} \">".diccionario($idioma_id,'str_boton_borrar')."</td><td> </td>"; }
}
}

En el código fuente se ve que la funcion hace lo siguiente:
<table cellpadding=2 cellspacing=0 border=0><tr> <td align=center width=80 class=tbutton style="cursor:hand" onclick="document.form.enviar.value ='SALVAR';document.form.submit(); ">Salvar</td><td> </td> <td align=center width=80 class=tbutton style="cursor:hand" onclick="document.form.enviar.value ='BUSCAR';document.form.submit(); ">Buscar</td><td> </td> <td align=center width=80 class=tbutton style="cursor:hand" onclick="document.form.enviar.value ='LISTAR';document.form.submit(); ">Listar</td><td> </td> <td align=center width=80 class=tbutton style="cursor:hand" onclick="document.form.enviar.value ='NUEVO';document.form.submit(); ">Nuevo</td><td> </td></tr></table>

Por favor ayudenme, no se que estoy haciendo mal.

Gracias,

Valora esta respuesta

Comentar

ayuda por favor

Solo para conocedores!!! |:-1