我的append（）似乎沒有起作用

Question

我確定這是一個非常新手的問題，但我最近剛開始為包含客戶端表單驗證的表單輸入一些代碼。 在我嘗試為此編寫javascript / jQuery代碼的開頭，我的append（）方法只是沒有產生任何可見的結果。 我已經嘗試隔離append（）語句，將id更改為class，查看舊代碼，其中我已將段落添加到div中無效。 我們非常歡迎所有的建議和提示。

html5代碼：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <title></title>
    </head>
    <body>
        <form>
        First name: <input id = "firstName" type="text" name="firstname" value="first name"><br/> 
        Last name: <input id = "lastName" type="text" name="lastname" value="last name"><br/> 
        <div class = "text"><textarea></textarea>
        <p></p> <input type="radio">Master Race Python User
        <p></p> <input type="radio">Imperial Ruby Scum
        </div>

        <div class = "languages">
        <h3>Languages Known</h3>
        <input type="checkbox">Python 
        <input type="checkbox">Ruby
        <input type="checkbox">html
        <input type="checkbox">CSS
        <input type="checkbox">Javascript
        <input type="checkbox">jQuery
        <input type="checkbox">Other
        <input type="checkbox" checked>Filthy casual
        <p><input type ="submit"></p>
        </div>
        <div id = "check">
            <p><strong><em>Check</em></strong></p>
        </div>
        <div class = "response">
            <p></p>
        </div>
        </form>
    </body>
</html>

CSS代碼：

.text {
    background-color:#00ffff;
    border:solid black;
    border-radius:3%;
    box-shadow: 5px 5px 5px
}
.languages {
    background-color:#FFFF33;
    border:solid black;
    border-radius:15%;
    box-shadow: 5px 5px 5px;
    margin-top:10px;
}
#check {
    background-color:#ABCDEF;
    border:solid black;
    width:50px;
    margin-left:200px;
    margin-top:10px;
}

.response {
    border:solid black;
    width:190px;
    height:50px;
}

使用Javascript / jQuery的：

$(document).ready(function(){
    $(".response").append("<p>"+"Nothing to do, eh?" +"</p>")
    $("#check").click(function(){
        var lastName =("#lastName").val()
        if (lastName === ""){
            $(".response").append("<p>"+"Please submit a valid entry"+"</p>")
        }
    })
})

Answer 1

您的jQuery代碼缺少$

這一行：

var lastName =("#lastName").val()

應該是：

var lastName =$("#lastName").val()

http://jsfiddle.net/bxJaV/

Answer 2

您在下面的行中缺少$符號。 這是一個拼寫錯誤。

var lastName =("#lastName").val()

相反，它應該是

var lastName =$("#lastName").val();

Answer 3

你是否包括jQuery？ 您的HTML代碼沒有可加載jQuery的標記。

嘗試添加：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Answer 4

我發現的另一個問題是你已經為#lastName設置了一個值：

<input id="lastName" type="text" name="lastname" value="last name">

保持值為空並使用占位符。

<input id="lastName" type="text" name="lastname" value="" placeholder = "last name">

Answer 5

原因很簡單，如果姓氏字段的值為空，則附加，但在標記中，您已設置其值=“姓氏”

因此，您的條件不會執行，因此腳本不會附加。

只需從html中的input元素中刪除你的值，你就完成了。

我為你添加了一個工作代碼。 希望這可以幫助...

http://jsbin.com/EDOJEZ/1/edit?html,output

是的，你在下面的陳述中也忘記了$

var lastName =$("#lastName").val();

我的append（）似乎沒有起作用

問題描述

5 個解決方案

解決方案1
5 已采納 2013-09-19 17:37:01

解決方案2
4 2013-09-19 17:37:27

解決方案3
4 2013-09-19 17:38:25

解決方案4
0

解決方案5
0 2013-09-19 17:40:31

我的append（）似乎沒有起作用

問題描述

5 個解決方案

解決方案1 5 已采納 2013-09-19 17:37:01

解決方案2 4 2013-09-19 17:37:27

解決方案3 4 2013-09-19 17:38:25

解決方案4 0

解決方案5 0 2013-09-19 17:40:31

解決方案1
5 已采納 2013-09-19 17:37:01

解決方案2
4 2013-09-19 17:37:27

解決方案3
4 2013-09-19 17:38:25

解決方案4
0

解決方案5
0 2013-09-19 17:40:31