pantalla condicional de formularios de elementos html

Bueno, después de una introducción de una hora a javascript, he encontrado el siguiente código. Hizo lo que quería bien, pero luego quería algo más y no funcionará.pantalla condicional de formularios de elementos html

Quería que al hacer clic en un botón, un cierto campo se ocultara y al hacer clic en otro sí, otro se escondería también, PERO, por supuesto, tenía que mostrar el otro, de lo contrario terminaríamos con nada y el propósito era presentar diferentes campos dependiendo de lo que el usuario hiciera clic (en un botón de opción). De manera infantil hice mi código y funcionó. Pero luego se me ocurrió que quería primero tener ambos campos ocultos en lugar de los dos campos mostrados, y aquí está el problema. Agregué un valor 0 al parámetro de la función "diciéndole" que cuando x = 0, entonces visibility = hidden. ¡Pero no me escuchará! Entonces, la parte del código que dice que x = 1 y 2 funciona, el que está cerca de 0, no.

Es un código tan simple que puede hacer sonreír a alguien, pero diablos, estaba limpio y funcionó. ¿Alguien sabe cómo tener los campos ocultos antes de hacer clic en los botones?

Gracias mucho que quitar algunas etiquetas de HTML

<html> 
    <head> 
     <script language="javascript"> 
      var x = 0; 

      function hola(x) { 
       if(x == 0) { 
        document.getElementById("cont1").style.visibility="hidden"; 
        document.getElementById("cont2").style.visibility="hidden"; 
       } 

       if(x == 1) { 
        document.getElementById("cont1").style.visibility="visible"; 
        document.getElementById("cont2").style.visibility="hidden"; 
       } 

       if(x == 2) { 
        document.getElementById("cont1").style.visibility="hidden"; 
        document.getElementById("cont2").style.visibility="visible"; 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <input type="button" onclick="hola(1)" value="hidefield2" id="boton1"> 
     <div id="cont1"> 
      <input type="text"> 
     </div> 

     <input type="button" onclick="hola(2)" value="hidefield1" id="boton2"> 

     <div id="cont2"> 
      <input type="text"> 
     </div> 
    </body> 
<html>

Fuente

2010-10-18 Alvaro

no hacer ¿crees que deberías ** llamar ** a la función con 0 como parámetro en algún punto? – Pointy

Hola, gracias por tomarte el tiempo para echar un vistazo a mi pregunta. Según su comentario, creo que lo he hecho bien desde el principio, he puesto x = 0, pero ahora que lo dice, estoy empezando a pensar que esa variable no tiene poder para cruzar la línea del inicio de la función, es decir, la función puede desconocer la asignación de 0 a x líneas anteriores. Por lo tanto, si el valor predeterminado es naturalmente, la visibilidad visible, es por eso y ya que no hubo ninguna asignación adicional, entonces se mantiene. Entonces la explicación para el comportamiento debe probablemente que el valor X = 0 declarado antes de la función no sea global. – Alvaro

Lo trabajaron:
Tenías dos botones, tanto visibles en el principio . Y al hacer clic en un botón, escondiste un div e hiciste otro visible.

Ahora necesita una situación en la que los divs se deben ocultar al principio, y luego mostrar cuando se presiona un botón.

De forma predeterminada, para todos los elementos en los que no se proporciona un atributo visibility explícito, visibility se considera visible.

Para que el botón sea invisible, debe agregar visibility:hidden al botón.

Puede hacerlo de dos maneras:

en el código de los div s, a continuación, hacer "invisible por defecto" agregando style='visibility:hidden'.

Añadir otra función javascript que se llama en la carga de la página, y hace que tanto los divs invisibles:

function hideBoth() 
{ 
    document.getElementById("cont1").style.visibility="hidden"; 
    document.getElementById("cont2").style.visibility="hidden" ; 
}

llaman por la carga de su página: <body onload='hideBoth()'>

Fuente

2010-10-18 17:26:13 Nivas

Gracias a ambos comentaristas: mis conclusiones después de haber trabajado con sus propuestas son: 1) Creo que la razón del problema de que la asignación de x = 0 no funcionaría a pesar de que existe claramente una llamada a eso es que la X se colocó afuera arriba antes del comienzo de la función. 2) Si codifiqué en línea la visibilidad oculta en la etiqueta html, aunque la ocultó, no se mostraría al hacer clic en los botones. 3) Finalmente, la llamada de carga a la función desde el cuerpo y la adición de la función hideboth hicieron el truco. Muchas gracias. Alvaro – Alvaro

Esta línea:

document.getElementById("cont1").style.visibility="hidden";

añade esto:

style="visibility: hidden;"

a esto:

<div id="cont1">

para que se vea así:

<div id="cont1" style="visibility: hidden;">

Puede hacerlo usted mismo, simplemente añadiendo ese atributo a la etiqueta html.

Oh sí

, y esto:

<div id="cont1">

es lo mismo que esto:

<div id="cont1" style="visibility: visible;">

Fuente

2010-10-18 17:08:29

pantalla condicional de formularios de elementos html

Respuesta

Cuestiones relacionadas