Javascript 在异常类型错误时暂停：document.getElementById（…）为null

在这里，我创建了一个评论系统。如果至少已经有一条注释，它可以正常工作，但如果没有注释并尝试创建一条注释，则会显示异常时暂停的错误 TypeError:document.getElementById（…）为null。我不知道该怎么修

html

{%if node.level<3%}
回复
{%endif%}

jquery、ajax功能

$(document).on('click', '#newcomment, #newcommentinner', function (e) {
    e.preventDefault();

    var button = $(this).attr("value");
    var post_id = document.getElementById('post_id').getAttribute('post-id'); #Here is an error appearing.
    var post_slug = document.getElementById('post_id').getAttribute('post-slug');
    console.log(post_id,'postid')
    var placement = "commentform"
    if (button == "newcommentform") {
      var placement = "newcommentform"
    }
 
    $.ajax({
      type: 'POST',
      url: '{% url "posts:addcomment" %}',
      data: $("#" + button).serialize() + "&post_id="+post_id + "&post_slug="+post_slug,
      cache: false,
      error: console.log('post_id' + post_id),
      success: function (json) {
        console.log(json)

        $('<div id="" class="my-2 p-2" style="border: 1px solid grey"> \
          <div class="d-flex justify-content-between">By ' + json['user'] + '<div></div>Posted: Just now!</div> \
          <div>' + json['result2'] + '</div> \
          <hr> \
          </div>').insertBefore('#' + placement);

        $('.commentform').trigger("reset");
        formExit()
      },
      error: function (xhr, errmsg, err) {
      }
    });
  })

$（文档）。在（'click'，'newcomment'，'newcommentinner'，函数（e）{
e、 预防默认值（）；
var按钮=$（this.attr（“值”）；
var post_id=document.getElementById（'post_id'）.getAttribute（'post-id'）；#出现一个错误。
var post_slug=document.getElementById（'post_id'）.getAttribute（'post-slug'）；
console.log（post_id，'postid'）
var placement=“commentform”
如果（按钮==“newcommentform”）{
var placement=“newcommentform”
}
$.ajax({
键入：“POST”，
url:“{%url”发布：addcomment“%}”，
数据：$（“#”+”按钮）。序列化（）+“&post_id=“+post_id+”&post_slug=“+post_slug，
cache:false，
错误：console.log（'post\u id'+post\u id），
成功：函数（json）{
console.log（json）
$(' \
由'+json['user']+'发布：刚刚\
'+json['result2']+'\
\
）。插入前（“#”+位置）；
$（'.commentform'）。触发器（“重置”）；
formExit（）
},
错误：函数（xhr、errmsg、err）{
}
});
})

---

如果需要更多代码，请在注释会话中告诉我。我将用这些信息更新我的问题。

我想知道为什么你会把jQuery语法和普通JS弄混了？：）

我应该这样做

$(document).on('click', '#newcomment, #newcommentinner', function (e) {
    e.preventDefault();

    var button = $(this).attr("value");
    var post_id = document.getElementById('post_id').getAttribute('post-id'); #Here is an error appearing.
    var post_slug = document.getElementById('post_id').getAttribute('post-slug');
    console.log(post_id,'postid')
    var placement = "commentform"
    if (button == "newcommentform") {
      var placement = "newcommentform"
    }
 
    $.ajax({
      type: 'POST',
      url: '{% url "posts:addcomment" %}',
      data: $("#" + button).serialize() + "&post_id="+post_id + "&post_slug="+post_slug,
      cache: false,
      error: console.log('post_id' + post_id),
      success: function (json) {
        console.log(json)

        $('<div id="" class="my-2 p-2" style="border: 1px solid grey"> \
          <div class="d-flex justify-content-between">By ' + json['user'] + '<div></div>Posted: Just now!</div> \
          <div>' + json['result2'] + '</div> \
          <hr> \
          </div>').insertBefore('#' + placement);

        $('.commentform').trigger("reset");
        formExit()
      },
      error: function (xhr, errmsg, err) {
      }
    });
  })

var post_id = $('#post_id').attr('post-id')