getElementById has no properties :-(

Tengo un problema: tengo el siguiente código

Código :

<table width="100%" border="0" class="cuadro">
   <tr>
      <th id="th1" width="200" align="left" valign="top" scope="row" onmouseover="resaltar('th1', 1);" onmouseout="resaltar('th1', 0);" class="normal">Enfermer&iacute;a</th>
   </tr>
</table>

Y la siguiente función en JavaScript:

Código :

function resaltar(id, status) {
   if (status == 1) {
      getElementById(id).setAttribute('class', 'resaltada');
   }
   else if (status == 0)
   {
      getElementById(id).setAttribute('class', 'normal');
   }
}

Pero siempre me salta el mismo error: document.getElementById(id) has no properties o getElementById(id) is not defined, según lo que ponga

¿Cómo lo soluciono?

creo que así debe funcionar:

Código :

function resaltar(id, status) {
   if (status == 1) {
     document.getElementById(id).setAttribute('class', 'resaltada');
   }
   else if (status == 0)
   {
      document.getElementById(id).setAttribute('class', 'normal');
   }
}

Efectivamente, con la indicación de ShotoKan, funciona perfectamente.
En resumen:

Código :

<style>
.resaltada{background-color:red;}
.normal{background-color:blue;}
</style>
<table width="100%" border="0" class="cuadro">
   <tr>
      <th id="th1" width="200" align="left" valign="top" scope="row"
     onmouseover="resaltar('th1', 1);" onmouseout="resaltar('th1', 0);"
     class="normal">Enfermería</th>
   </tr>
</table>
<script>
function resaltar(id, status)
{if (status == 1) {document.getElementById(id).setAttribute('class', 'resaltada');}
 else if (status == 0) {document.getElementById(id).setAttribute('class', 'normal');}
}
</script>

Pero puedes reducir mucho la función:

Código :

<script>
function resaltar(id)
{elemento=document.getElementById(id);
 elemento.setAttribute('class', elemento.className=='normal'?'resaltada':'normal');
}
</script>

Llamando a la función con sólo "javascript:resaltar(id);", igualmente tanto para mouseOver, como mouseOut.

Normalmente el depurador javascript te manda error por que la pagina html no se ha cargado, pues el js esta de primero, asi que no hay nodos DOM disponible. La solucion poco accesible es poner en los elementos la activacion (que es cuando la pagina esta cargada). La solucion clasica es:

Código :

window.onload = function(){
//Tu codigo
}

Saludos

He seguido vuestros consejos, pero aunque en Firefox funciona de maravilla, en IE NO .

Así ha quedado la función, con pequeñas modificaciones:

Código :

function resaltar_C(num, inicio) {
   var elemento;
   while (inicio >= 0) 
   {
      elemento = document.getElementById('c'+ num + inicio);
      if (elemento.className == 'normal') 
      {
         elemento.setAttribute('class', 'resaltada');
      }
      else
      {
         elemento.setAttribute('class', 'normal');
      }
      inicio -= 1;
   }
}

Y así un fragmento de la tabla:

Código :

<th id="c20" width="200" rowspan="3" align="left" valign="top" scope="row" onmouseover="resaltar_C(2, 3);" onmouseout="resaltar_C(2, 3);" class="normal">Medicina interna</th>
      <td id="c21" onmouseover="resaltar_C(2, 3);" onmouseout="resaltar_C(2, 3);" class="normal">Dr. Jos&eacute; Carlos Pontes Navarro</td>
   </tr>
   <tr>
      <td id="c22" onmouseover="resaltar_C(2, 3);" onmouseout="resaltar_C(2, 3);" class="normal">Dr. Jos&eacute; Antonio Nuevo Gonz&aacute;lez</td>
   </tr>
   <tr>
      <td id="c23" onmouseover="resaltar_C(2, 3);" onmouseout="resaltar_C(2, 3);" class="normal">Dr.  Luis Miguel Cuadrado G&oacute;mez</td>
   </tr>

Si alguien pudiera ayudarme...

Sólo puedo decir una cosa:
Maldito y PUTO Internet Explorer...
A ver cuando deja de usarlo la gente...

rizome escribió:

Completamente de acuerdo

Por cierto... funcionó

Gracias!

Me alegro de haberte sido de ayuda.
(PD: Yo tb he aprendido algo con esto)