javascript - 查看是否有文本输入

Question

所以我试图检查用户是否通过文本框 userInput 输入了文本。但是，当我尝试编写 if else 语句来验证输入时，似乎没有任何效果。有什么帮助吗？

<div class="container">
<div class="row">
    <div class="page-header">
        <h1 align="center">Sub To Me <small>Easily create YouTube subscription links!</small></h1>
    </div>
</div>

<script type="text/javascript">
    function showLink() {

                  $("#linkBox").css("visibility", "visible");

        $("#linkText").html("http://subto.me/"+$("#usernameInput").val())
        $("#linkHref").attr("href", "http://subto.me/"+$("#usernameInput").val())
}   
</script>

<div class="row">
    <div class="span6 offset3">
        <div class="form-inline">
            <div class="input-append">
                <input class="span4" type="text" id="usernameInput" placeholder="Youtube Username">
                <button class="btn" onClick="showLink();">Get Link</button>
            </div>
        </div>
    </div>
</div>
<div class="row" id="linkBox" style="visibility: hidden; margin-top: 25px;">
    <div class="span12">
        <div class="alert alert-success" style="width: 50%; margin: 0 auto; text-align: center; padding: 24px;">
            <a id="linkHref" href="" target="_blank"><span id="linkText" style="font-size: 24pt; font-weight: bold;"></span></a>
        </div>
    </div>
</div>

Answer 1

这里
你应该阻止你的用户提交空白表单，并且不要忘记包含 jquery 库。

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function showLink() {
            var usernameInput = $('#usernameInput').val();
            if(usernameInput != ''){

                $("#linkBox").css("visibility", "visible");

                $("#linkText").html("http://subto.me/"+$("#usernameInput").val())
                $("#linkHref").attr("href", "http://subto.me/"+$("#usernameInput").val())
            }
            else{
                alert('Please Enter Something');
            }
    }   
    </script>
<div class="container">
<div class="row">
    <div class="page-header">
        <h1 align="center">Sub To Me <small>Easily create YouTube subscription links!</small></h1>
    </div>
</div>
<div class="row">
    <div class="span6 offset3">
        <div class="form-inline">
            <div class="input-append">
                <input class="span4" type="text" id="usernameInput" placeholder="Youtube Username">
                <button class="btn" onClick="showLink();">Get Link</button>
            </div>
        </div>
    </div>
</div>
<div class="row" id="linkBox" style="visibility: hidden; margin-top: 25px;">
    <div class="span12">
        <div class="alert alert-success" style="width: 50%; margin: 0 auto; text-align: center; padding: 24px;">
            <a id="linkHref" href="" target="_blank"><span id="linkText" style="font-size: 24pt; font-weight: bold;"></span></a>
        </div>
    </div>
</div>