Estoy tratando de obtener acceso a un elemento HTML que (actualmente) es igual a cero en HTML.

Elemento HTML en una plantilla de Django:

 {% for post in page_obj.object_list %} <div class = "individual_posts"> <h6 id = "post_itself_{{ post.id }}" class="post_itself">{{ post.post }}</h6> <h6 id="likes_{{ post.id }}" class = "post_elements">{{ post.likes }}<button class="like_button">&#x1F44D;</button></h6> {% endfor %}

El valor predeterminado para {{ post.likes }} es cero, pero estoy tratando de obtener acceso al elemento HTML para poder aumentar el valor.

JavaScript:

 document.addEventListener('DOMContentLoaded', function(){ const likeButtons = document.querySelectorAll('.like_button'); for (const l_button of likeButtons){ l_button.addEventListener('click', (event) => like(event.target.id)); } }); function like(id){ let likes = document.querySelector(`#likes_${id}`); console.log(likes) console.log(likes.value); let likeNum = likes +=1; }

Desde el primer archivo console.log, obtengo null . Desde el segundo console.log, obtengo undefined .
¿Alguien sabe cómo acceder al valor de este id?