Quiere usar Javascript y HTML para mostrar el botón cuando el texto ingresado en el cuadro de texto es igual a "X"

** Nota: acabo de descubrir cómo llamar a funciones a través de funciones y, como tal, realmente no necesito mucha ayuda con esto. Pero si hay un método más limpio para hacer esto. ¡Por favor hágamelo saber!

De acuerdo, soy realmente nuevo en javascript y HTML, así que no me odien si no entiendo algunos de los conceptos básicos. Por lo que sé, este código que se me ocurrió debería estar funcionando. De todos modos, lo que quiero hacer es tener un cuadro de texto en blanco para que alguien ingrese texto. Cuando ingresan texto usando el comando onchange, quiero que el nuevo valor de ese cuadro de texto sea el disparador para que aparezca un botón usando la declaración "si" en Javascript.

Por ejemplo: si alguien ingresa en el cuadro de prueba la palabra "prueba". Cuando vuelvan a hacer clic fuera del cuadro, me gustaría que apareciera un botón (lo que dice es irrelevante). Pero si ponen cualquier otra cosa que no sea igual a la palabra "prueba", no mostrará un botón hacia arriba.

Este es el siguiente código que tengo. 

<html>
<head>
<script>
window.onload=function(){
 document.getElementById("button").style.display='none';
}
function textCheck(){
if (document.getElementById("userText").value == "test") alert("hello");  
}
</script>
</head>
<body>
<input type="button" id="button" value="New Button"/>
<input type="text" id="userText" onchange="textCheck()"/>
</body>
</html>

Notaré que el código anterior se realizó en parte con la ayuda de otras búsquedas de stackoverflow. Sin embargo, esto me da una alerta. Lo que quiero es un botón. Entonces, en lugar de la línea de alerta, necesito que ejecute otra función para mostrar el botón.

¿Funcionaría este siguiente código? 

}
function showButton(){
document.getElementById("button").style.display='block';
}

Y si es así, ¿cómo reemplazo la alerta con código para ejecutar una segunda función? Si alguien tiene alguna idea mejor, sería muy apreciada.

preguntado el 12 de febrero de 14 a las 06:02

¿Funcionaría este siguiente código? Pruébelo usted mismo. -

¿Qué quieres decir con que necesitas un botón? En la parte superior dices que quieres alertar algo, en la parte inferior dices que no quieres alertar, quieres mostrar el botón. ¿Dónde quieres mostrar el botón? Estoy perdido. -

Lo lamento. Escribí la publicación originalmente con la intención de hacer una alerta, pero en realidad quería hacer un botón. Olvidé cambiar eso. Lo haré ahora mismo. @Franchez, no, no puedo usar jQuery. -

4 Respuestas

Creo que el evento que está buscando es onblur, no onchange.

La implementación correcta se vería así.

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            window.onload = function() {
                document.getElementById("button").style.display = 'none';
            }
            function textCheck() {
                if (document.getElementById("userText").value == "test") {
                    alert("incorrect value");
                    document.getElementById("userText").value = ""; // clearing input field
                    document.getElementById("userText").focus();  // setting the focus on the input
                    return false;
                } else {
                    return true;
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="button" value="New Button"/>
        <input type="text" id="userText" onblur="textCheck()" />
    </body>
</html>

¡¡¡¡Espero eso ayude!!!!

Respondido 12 Feb 14, 07:02

El autor no puede usar Jquery. No creo que su código esté usando esto, entonces, ¿cuál es el objetivo de esta inserción de script? - franchez

Espero tener lo que necesitas y aquí está el código:

window.onload = function() {
            document.getElementById("button").style.display = 'none';
        }
        function textCheck() {
            if (document.getElementById("userText").value == "test") {
                //document.getElementById("button").style.display = 'block';
                //Alternate
                enableButton();
            } else {
                hideButton();
                document.getElementById("userText").value = "";
                //This is for clear the text in text field.
            }
        }
        function enableButton() {
            document.getElementById("button").style.display = 'block';
        }
        function hideButton() {
            document.getElementById("button").style.display = 'none';
        }

Respondido 12 Feb 14, 07:02

¿Cuál es la diferencia entre su código y autor? ¿Excepto que mueves una línea de código en una función? - franchez

Autor poco desordenado, creo. imaginó todo lo demás. acabo de poner todo junto y comentarios sobre cómo funciona el código. parece que lo consigue. Problema resuelto. - CodeMonkey

Bueno, tienes todas las piezas para hacer que esto funcione. Al colocar el código que rastrea la instrucción if entre corchetes, crea un bloque de código que se ejecutará cuando la condición sea verdadera.

function textCheck(){
    if (document.getElementById("userText").value == "test") {
        document.getElementById("button").style.display='block';
    }
}

Respondido 12 Feb 14, 06:02

Podrías intentar hacer algo similar a esto:

var theBtn = document.getElementById("button");

theBtn.addEventListener('click', textCheck, false)

function textCheck(){
    if (document.getElementById("userText").value == "test") {
        alert("hello");  
    };
}

Aquí hay un JSFiddle

Respondido 12 Feb 14, 07:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.