JQuery сохранение формы ввода в массив объектов, а затем отображать их, получая uncaught typeError

Question

В настоящее время я работаю над формой в стиле начальной загрузки, которая позволяет человеку вводить обработчик и комментарий. У него есть кнопка, при нажатии которой вызывается обработчик события jquery, который сохраняет обработчик, комментарий и дату.now () в объекте, который будет помещен в массив пользователей.

Однако я продолжаю получать

"Uncaught TypeError: Невозможно прочитать свойство 'handler' undefined в HTMLButtonElement., в HTMLButtonElement.dispatch, at HTMLButtonElement.v.handle. "

Ошибка из строки файла .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].handler вместо users[0].person.handler.Хотя переменная имеет имя person, в массив users фактически вставляется ссылка на объект person.

Кроме того, используйте метод .html() для установки innerHTML объекта#display h1 как 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>

Answer 2

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);
});