Duda de "document.getElementById"

jorgelopezvz · #1 (**permalink**) 21/11/2012, 13:55

Tengo problemas con el siguiente código, no funciona al 100%. En la parte del script, no funciona "document.getElementById('ifNo').style.visibil ity = 'collapse';" cuando se selecciona el "No"
Saludos!

Código HTML:

<html>
<head>
<meta http-equiv="content-language" content="es">

<title>Alta de alumnos.</title>

</head>
<body>

<script language="JavaScript">
function yesnoCheck() {
    if (document.getElementById('yesCheck').checked)  {
        document.getElementById('ifYes').style.visibility = 'visible';
        document.getElementById('ifNo').style.visibility = 'collapse';
    }
    else
        document.getElementById('ifNo').style.visibility = 'visible';
        document.getElementById('ifYes').style.visibility = 'collapse';
}
</script>

<li><label for="Proceso">Compañia:</label><ul>
<li><input class="iradio" type="radio" checked="checked" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
<label for="Proceso2" class="ilabel">Si</label></li>
<li><input class="iradio" type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">
<label for="Proceso3" class="ilabel">No</label></li>
</ul></li>


<div id="ifYes" style="visibility:visible">
<li><label for="ficha">N° Ficha:</label><input class="itext" type="text" name="ficha" id="ficha" /></li>
</div>

<div id="ifNo" style="visibility:collapse">
<li><label for="curp">CURP:</label><input class="itext" type="text" name="curp" id="curp" /></li>
</div>

</body>

</html>

Albuss · #2 (**permalink**) 21/11/2012, 22:19

Ese id ya lo tienes en collapse en el body.

rosonator · #3 (**permalink**) 22/11/2012, 05:53

Creo que collapse es solo para borrar <tr> y <td> en tablas. Prueba a usar .visibility = "hidden".

Cita:

Iniciado por Albuss

Ese id ya lo tienes en collapse en el body.

Da igual, no es problemático, además llama a la función en el onclick, es decir, tanto haciendo checked como quitándolo, así que lo necesitará por si se dedica a reactivar y redesactivar.

PD: De todas formas, ejecuta tus códigos en Chrome y en Inspeccionar Elemento tienes una consola que te acerca bastante al error.

emprear · #4 (**permalink**) 22/11/2012, 06:23

Estás haciendola complicada, y tu html está muy sucio
Si definis los id en los radio, aprovechá estos para establecer la condición, si querés dar formato de lista a los inputs, ahorrate los divs, si bien collapse actuará como hidden, lo correcto es hidden, uso del atributo for en los label incorrecto, debe referirse a un id, uso del pseudoprotocolo javascript en los evento innecesario y redundante.
Urgente a los manuales compañero

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Alta de alumnos.</title>
<script type='text/javascript'>
function yesnoCheck(radio) {
    if(radio.id == "yesCheck"){
    document.getElementById('ifYes').style.visibility = 'visible';
    document.getElementById('ifNo').style.visibility = 'hidden';
    }else{
    document.getElementById('ifYes').style.visibility = 'hidden';
    document.getElementById('ifNo').style.visibility = 'visible';
    }
}
</script>
</head>
<body>
<form action="#">
<label>Compañia:</label><br /><br />
<label for="yesCheck" class="ilabel">Si</label>
<input class="iradio" type="radio" checked="checked" onclick="yesnoCheck(this);" name="yesno" id="yesCheck" />
<label for="noCheck" class="ilabel">No</label>
<input class="iradio" type="radio" onclick="yesnoCheck(this);" name="yesno" id="noCheck" />
<ul>
<li  id="ifYes" style="visibility:visible">
<label for="ficha">N° Ficha:</label><input class="itext" type="text" name="ficha" id="ficha" />
</li>
<li id="ifNo" style="visibility:hidden">
<label for="curp">CURP:</label><input class="itext" type="text" name="curp" id="curp" />
</li>
</ul>
</form>
</body>
</html>

Saludos