0

Buenas buscaba hacer una página dinámica html usando unas funciones javaScript. Quiero que al yo añadir un texto por pantalla y pulsar el botón de "Ver" me aparezca un texto debajo de este, y luego yo al pulsar de nuevo el botón me desaparezca el texto de nuevo. De momento con lo que tengo el texto me aparece pero al darle yo de nuevo al botón ya no me hace caso a la función javaScript.

Adjunto el código para que veias como me funciona ahora mismo.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>JSP Page</title>
</head>

<body>
  <script>
    function aparecer() {
      var texto = document.getElementById("texto").value;

      if (texto === "texto") {
        aparecer2();
        return true;
      }
      return false;
    }

    function aparecer2() {
      document.getElementById('oculto').style.visibility = 'visible';
      document.getElementById('boton').style.visibility = 'hidden';
      document.getElementById('boton2').style.visibility = 'visible';
    }
  </script>

  <br>Este texto se ve siempre

  <input type="text" id="texto">
  <input type="button" id="boton" style="visibility:visible" onclick="aparecer()" value="Ver texto oculto">
  <input type="button" id="boton2" style="visibility:hidden" onclick="aparecer()" value="Ocultar texto">

  <div id="oculto" style="visibility:hidden">
    Este texto se verá cuando yo quiera
  </div>


</body>

</html>

1
  • ¿porque estás vinculando la aparición del texto a escribir "texto" en el input? ¿es así como lo quieres? Y para cuando desaparezca... ¿debe haber algo concreto en el input o simplemente lo quieres hacer desaparecer haya lo que haya en el?
    – masterguru
    el 31 oct. 2022 a las 11:30

1 respuesta 1

1

Si lo que pretendes es que al poner un determinado texto en el input se muestre otro texto en plan huevo de pascua o como resultado de una adivinanza o una pregunta, creo que lo podrías dejar tal como se muestra en el ejemplo que aparece más abajo.

En dicho ejemplo he cambiado un poco el javascript para que sea más coherente y sin llamadas innecesarias a otras funciones, simplificandolas en dos, aparecer() y desaparecer(), y también, para evitar que al mostrar el botón ocultar éste aparezca desplazado, he agregado la propiedad display:none o bien display:inline al primer botón según se de una acción u otra:

Ejemplo:

function aparecer() {
  var texto = document.getElementById("texto").value;
  if (texto === "texto") {
    document.getElementById('oculto').style.visibility = 'visible';
    document.getElementById('boton').style.visibility = 'hidden';
    document.getElementById('boton').style.display = 'none';
    document.getElementById('boton2').style.visibility = 'visible';
  }
}

function desaparecer() {
  document.getElementById('oculto').style.visibility = 'hidden';
  document.getElementById('boton').style.visibility = 'visible';
  document.getElementById('boton').style.display = 'inline';
  document.getElementById('boton2').style.visibility = 'hidden';
}
<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
  </head>

  <body>
    <br>Este texto se ve siempre

    <input type="text" id="texto">
    <input type="button" id="boton" onclick="aparecer()" value="Ver texto oculto">
    <input type="button" id="boton2" style="visibility:hidden" onclick="desaparecer()" value="Ocultar texto">

    <div id="oculto" style="visibility:hidden">
      Este texto se verá cuando yo quiera
    </div>


  </body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.