0

** Note: I just figured out how to call functions through functions and as such don't really need a lot of help with this. But if there is a cleaner method of doing this. Please let me know!

Okay, so I'm really new to javascript and HTML so don't hate me if I don't understand some of the basics. From what I know this code I've come up with should be working. Anyways, what I want to do is have a blank text box for someone to input text into. When they input text using the onchange command I want that textbox's new value to be the trigger for a button to show up using the "if" statement in Javascript.

For example: If someone inputs into the test box the word "test". When they click outside of the box again I would like a button to show up (what it says is irrelevant). But if they put anything else that isn't equal to the word "test" it won't show a button up.

This is the following code I have.

<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>

I will note that the previous code was done in part with help from other stackoverflow searches. However, this gives me an alert. What I want is a button. So instead of the alert line I need it to run another function to show the button.

Would this following code work?

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

And if so, how do I replace the alert with code to run a second function? If anyone has any better ideas it would be greatly appreciated.

3
  • Would this follwing code work? Test it yourself.
    – Konza
    Feb 12, 2014 at 6:53
  • What do you mean you need button? On top you say you want to alert something, at the bottom you are saying you don't want alert, you want to show button. Where do you want to show button? I'm Lost. Feb 12, 2014 at 6:54
  • Sorry about that. I wrote the post originally intending to do an alert but I actually wanted to do a button. I forgot to change that around. I'll do that right now. @Franchez, no I can't use jQuery.
    – kster
    Feb 12, 2014 at 6:56

4 Answers 4

1

I think the event you are looking for is onblur not onchange.

The correct implementation would look like this.

<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>

Hope it helps!!!!

1
  • Author can not use Jquery. I do not think your code is using this so what's the goal of this script insertion ?
    – franchez
    Feb 12, 2014 at 7:07
0

I hope i got what you need and here's the code:

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';
        }
2
  • what's the difference between your code and author ? Except that you move a line of code in a function ?
    – franchez
    Feb 12, 2014 at 7:05
  • Author little messed up i think. he figured everything else. i just put the everything together and comments about how the code works. seems he gets it. Problem solved.
    – CodeMonkey
    Feb 12, 2014 at 7:08
0

Well, you do have all the pieces to get this to work. By putting the code traling the if statement inside curly brackets, you create a code block to be executed when the condition is true.

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

You could try doing something along the lines of this:

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

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

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

Here's a JSFiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.