Javascript - コンストラクタを関数として呼び出すことはできません

Question

このコードで何が間違っているのか教えてください。 これはDjangoフレームワーク+ JSです。

ボタンをクリックすると、divブロックが表示されます。

他のすべてが正常に動作しています。私のブールは大丈夫だし、comment.idは一意のIDを返します。

私はボタンをクリックすると、私はJSエラーを持っている：「コンストラクタは関数として呼び出すことはできません」

Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' operator, this DOM object constructor cannot be called as a function. 
    at HTMLButtonElement.onclick ((index):218) 
onclick @ (index):218 
(index):218 Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' operator, this DOM object constructor cannot be called as a function. 
    at HTMLButtonElement.onclick ((index):218) 
onclick @ (index):218 

マイコード：

<!-- Button see comments --> 
    <button 
    onclick="Comment()" 
    type="button" 
    class="w3-button w3-theme-d1 w3-margin-bottom"> 
    Commenter 
    </button> 
    <!-- end button --> 

    {%for comment in comments%} 

    {%if comment.articles.id == post.id or comment.statut.id == post.id %} 

     <!-- Bloc comments--> 
     <div id="{{comment.id}}" style="overflow-wrap: break-word; display: none;" class="w3-container w3-card-2 w3-white w3-round w3-margin">  
     <p>{{comment.text}}</p> 
      <p style="width: 100%; text-align: right;"> 
      <img alt="Avatar" class="w3-circle-articles" style="vertical-align:middle;" src="{{media}}{{comment.author.profile.avatar}}" /> 
      <span style="color: #0477BF;"">{{comment.author}}</span> le {{comment.date|date:"d F"}} à {{comment.date|date:"H:m"}} 
     </p>       
     </div> 
     <!-- End bloc comments --> 

     <!-- JAVASCRIPT to see comments --> 
     <script type="text/javascript"> 
     function Comment{{comment.id}}() { 
      document.getElementById("{{comment.id}}").style.display = "block"; 
     } 

     </script> 
     <!-- End JAVASCRIPT --> 

    {%endif%} 

    {%endfor%} 

これで次のようになりますページのソースコードを見ると、HTML：

<div id="2" style="overflow-wrap: break-word; display: ;" class="w3-container w3-card-2 w3-white w3-round w3-margin">  
        <p>lol</p> 
         <p style="width: 100%; text-align: right;"> 
         <img alt="Avatar" class="w3-circle-articles" style="vertical-align:middle;" src="http://******/media/user/user_20/avatar/horror-gaming-avatar.png"> 
         <span style="color: #0477BF;" "="">Preyor</span> le 10 juillet à 10:07 
        </p>       
    </div> 

<script type="text/javascript"> 
       function Comment2() { 
        document.getElementById("2").style.display = "block"; 
       } 

       i = i+1 
       document.getElementById("Comment_Count3").innerHTML = i; 
</script> 

    <div id="3" style="overflow-wrap: break-word; display: ;" class="w3-container w3-card-2 w3-white w3-round w3-margin">  
        <p>hihi</p> 
         <p style="width: 100%; text-align: right;"> 
         <img alt="Avatar" class="w3-circle-articles" style="vertical-align:middle;" src="http://*********/media/user/user_4/avatar/hebus_1920x1080_1464110916_5053_sMlLt6u.jpg"> 
         <span style="color: #0477BF;" "="">GrandGTO</span> le 18 juillet à 02:07 
        </p>       
    </div> 

    <script type="text/javascript"> 
        function Comment3() { 
         document.getElementById("3").style.display = "block"; 
        } 

        i = i+1 
        document.getElementById("Comment_Count3").innerHTML = i; 
    </script> 

Answer 1

Comment()関数はで定義されていませんです。 JavascriptエンジンはComment()の定義を見つけることができません。Comment2()、Comment3()の定義があります。しかし、Comment()の定義はありません。

function Comment{{comment.id}}() { // it should be Comment and not Comment{{comment.id}} 
     document.getElementById("{{comment.id}}").style.display = "block"; 
    }