How to make whole div clickable and put a dynamic url in Django template?

Question

I am trying to display a post (like a tweet in twitter) and when I display it I want the whole div to be clickable. So this works. Website is working the way I wanted with this code;

<div onclick='location.href="{% url 'post' post.id %}";' style="cursor: pointer;"> 
  <a href="#"> some other links </a> // it will take user to another page
  <img src= "" > //some image
  <p> some content </p>
  <a href="#"> some other links </a>
</div>

But it gives me some warnings in the terminal (VScode), each of the error is showing the same thing (div onclick line ) but strangely giving different errors. And I don't use javascript for this part of the code.

I tried different syntax like changing " " to ''. but it doesn't solve the problem.

Also in the code, it shows the line with red color as below, if it helps to figure what the problem is.

Any advice would be appreciated. Thanks in advance.

Answer 1

Your code is absolutely correct ignore the warnings and red-underlines by VScode. Red-underlines are there because by default the language mode is HTML therefore sometimes use of '' and "" shows error but it is fine as per Django Templating Engine

If for any reason onclick='location.href="{% url 'post' post.id %}";' does not work use this onclick='location.href="post/{{post.id}}";'

Answer 2

before your "div" tag, put an "a" tag and give it the url. You don't need to repeat the url manytimes.

EXAMPLE: