I am all new to javascript. I was working on a Django project to make a social networking app. I am having a problem with the like-button that will update the colour of the like button and the number of likes asynchronously without reloading the page. Here I'm sharing my Django template having the like button's code.
<form action="{% url 'likepost' posts_id=posts.id %}" id="likeform" method="POST" style="display: inline;">
{% csrf_token %}
<button id = "like" class="btn btn-link">Like</button>
</form>
<small id="num_of_likes">{{ posts.likepost.all.count }}</small>
Through the button containing id = "like", my javascript code will receive the Django template variable and fetch API from Django. Here is my js code.
document.addEventListener("DOMContentLoaded",function(){
document.querySelector('#like').addEventListener('click', ()=> like_function('like'));
})
function like_function(like){
fetch(`/index/${posts_id}`,{
method:"POST",
body : JSON.stringify({
"is_like" : is_like,
"num_like" : num_like,
})
})
.then(response => response.json())
.then(result => {
if(result.is_like){
document.querySelector('#like').innerHTML = "Unike";
}
else{
document.querySelector('#like').innerHTML = "Like";
}
})
}
Although my Django views method returns JSON data, I want my js code will get that JSON data and returns back to my homepage. Here's what error I got:

I didn't get what was actually going on. I want my javascript method will take me back to my homepage. Here's I have seen what's I am actually facing off. https://youtu.be/PV6ctAQNA64