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