Question

我目前正在使用引导程序样式的表单，该表单允许用户输入处理程序和注释。它具有一个按钮，当单击该按钮时，它将调用一个jquery事件处理程序，以保存处理程序，注释和日期。 now（）中的一个对象将被推送到数组用户中。

但是，我不断得到

“未捕获的TypeError：无法读取HTMLButtonElement.dispatch处HTMLButtonElement.v.handle处的HTMLButtonElement。处未定义的属性'handler'。”

错误来自.js文件行：$（“＃display”）。val ......

表格和显示区号

<form>
        <div class="form-group">
            <label for="exampleFormControlInput1">handle</label>
                <input type="text" class="form-control" id="handle" placeholder="@joe">
        </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">Comment</label>
                <textarea class="form-control" id="comm" rows="3" placeholder="Bad match last night, Joe sucked"></textarea>
        </div>
        <button id="button1" type="submit" class="btn btn-primary">Post</button>
</form>
<h1 id="display"></h1>

jquery .js文件

    $(document).ready(
function(){
var users = [];
$("#button1").click(function(){
    var person={
                handler:$("#handle").val(),
                comment:$("#comm").val(),
                postDate:Date.now()
               };

users.push(person);


$("#display").val(users[0].person.handler+"<br>"+users[0].person.comment);


     });
});

我是jquery新手，因此不确定如何解决此错误。

Answer 1

users[0].person.handler应该是users[0].handler。该变量名为person，但数组本身并不关心该变量。 users[0].person.comment也是如此。

编辑：同样，您可能需要调用preventDefault()才能停止刷新页面（除非您要这么做。

$("#button1").click(function(e){
  e.preventDefault();
  var person = {
    handler:$("#handle").val(),
    comment:$("#comm").val(),
    postDate:Date.now()
  };

  users.push(person);

  // i changed this to .html() because val() felt wrong
  $("#display").html(users[0].handler+"<br>"+users[0].comment);
});

Answer 2

使用users[0].handler代替users[0].person.handler。尽管变量被命名为person，但实际上被推入users数组中的只是对person对象的引用。

另外，使用.html()方法将innerHTML h1的#display设置为h1没有值属性。

$(document).ready(
function(){
var users = [];
$("#button1").click(function(e){
    var person={
                handler:$("#handle").val(),
                comment:$("#comm").val(),
                postDate:Date.now()
               };

users.push(person);

e.preventDefault();
$("#display").html(users[0].handler+"<br>"+users[0].comment);


     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
        <div class="form-group">
            <label for="exampleFormControlInput1">handle</label>
                <input type="text" class="form-control" id="handle" placeholder="@joe">
        </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">Comment</label>
                <textarea class="form-control" id="comm" rows="3" placeholder="Bad match last night, Joe sucked"></textarea>
        </div>
        <button id="button1" type="submit" class="btn btn-primary">Post</button>
</form>
<h1 id="display"></h1>

jQuery将表单输入保存到对象数组中，然后显示它们，得到未捕获的typeError

2 个答案: