I want to show a form onclick function for foreach post for a particular post id. I was trying like this but its not working.

 {% 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="ment"><i class="fa fa-ment"></i>Comment</button>
            <div id="ment-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('ment-form-' + postId).style.display = 'block'
    }
})
 </script>

I want to show a form onclick function for foreach post for a particular post id. I was trying like this but its not working.

 {% 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="ment"><i class="fa fa-ment"></i>Comment</button>
            <div id="ment-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('ment-form-' + postId).style.display = 'block'
    }
})
 </script>

• javascript

1 Answer 1

change your code like this declare the post-id inside the click event.And change selector withquerySelectorAll() .And also use with addEventListener() instead of normal click

Working example

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('ment-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="ment"><i class="fa fa-ment"></i>Comment</button>
  <div id="ment-form-{{ post.id }}" style="display: none;">
    <textarea></textarea>
    <button type="button"></button>
  </div>
</div>