javascript onclick foreach関数

Question

特定の投稿IDのforeach投稿のフォームonclick関数を表示したいと思います。私はこれのようにしようとしていたが、動作していない。

{% for post in posts %} 

      <div post-id="{{ post.id }}" class="post-box 
      w3-container w3-card-2 w3-white w3-round w3-margin"><br> 
      {# <img src="w3images/avatar6.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px"> #} 
      <span class="w3-right w3-opacity">{{ post.created }}</span> 
      <h4>{{ user.name }}</h4><br> 
      <hr class="w3-clear"> 
      <p><a href="/posts/{{ post.id }}">{{ post.title }}</a></p> 
      {# <img src="w3images/nature.jpg" style="width:100%" class="w3-margin-bottom"> #} 
      <p>{{ post.description }}</p> 
      <button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i>  Like</button> 
      <button class="w3-button w3-theme-d2 w3-margin-bottom" id="comment"><i class="fa fa-comment"></i>Comment</button> 
      <div id="comment-form-{{ post.id }}" style="display: none;"> 
       <textarea></textarea> 
       <button type="button"></button> 
      </div> 
     </div> 

     {% endfor %} 


<script> 
     var postBoxes = document.getElementsByClassName('post-box') 
     postBoxes.forEach(function (postBox) { 
     var postId = postBox.getAttribute('post-id') 
     postBox.onclick = function() { 
     document.getElementById('comment-form-' + postId).style.display = 'block' 
    } 
}) 
</script> 

Answer 1

も代わりに、通常の click

の作業例

var postBoxes = document.querySelectorAll('.post-box') 
 
postBoxes.forEach(function(postBox) { 
 

 
    postBox.addEventListener('click', function() { 
 
    var postId = this.getAttribute('post-id') 
 
    console.log(postId) 
 
    document.getElementById('comment-form-' + postId).style.display = 'block' 
 
    }) 
 
})

<div post-id="{{ post.id }}" class="post-box 
 
      w3-container w3-card-2 w3-white w3-round w3-margin"><br> {# <img src="w3images/avatar6.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px"> #} 
 
    <span class="w3-right w3-opacity">{{ post.created }}</span> 
 
    <h4>{{ user.name }}</h4><br> 
 
    <hr class="w3-clear"> 
 
    <p><a href="/posts/{{ post.id }}">{{ post.title }}</a></p> 
 
    {# <img src="w3images/nature.jpg" style="width:100%" class="w3-margin-bottom"> #} 
 
    <p>{{ post.description }}</p> 
 
    <button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i> Like</button> 
 
    <button class="w3-button w3-theme-d2 w3-margin-bottom" id="comment"><i class="fa fa-comment"></i>Comment</button> 
 
    <div id="comment-form-{{ post.id }}" style="display: none;"> 
 
    <textarea></textarea> 
 
    <button type="button"></button> 
 
    </div> 
 
</div>

の addEventListener()で使用 querySelectorAll() .ANDとクリックevent.And変更セレクタ内のポストIDを宣言し、このようにコードを変更