Recently, I started working with Django and I have a total of 8 cards. Each card contains an ID, content, and image path that I dynamically pulled from the database. My goal is to store the information of the clicked card in a JavaScript object and then print it on the console. Below is the code snippet I've managed to write so far:
<div class="row">
{% for i in room %}
<div class="col-4">
<div class="card6 mt-3" id="main_{{ i.id }}" style="width: 12rem;" onclick="getData({{ i.id }})">
<img src="{{ i.image.url }}" id="img_{{ i.id }}" alt="..." width="185" height="100">
<div class="card-body">
<p class="card-text" id="cont_{{ i.id }}"><b>{{ i.content }}</b></p>
</div>
</div>
</div>
{% endfor %}
</div>
For capturing the card data in JavaScript, I implemented the getData function as follows:
var object = [];
function getData(id,image,content)
{
var id = id;
var image = $("#img_"+id).attr('src');
var content = $("#cont_"+id).text();
console.log('id', id);
console.log('image', image);
console.log('content', content);
}
However, upon testing, I encountered the following error: project1:77 Uncaught ReferenceError: getdata is not defined at HTMLDivElement.onclick (. If you notice any issues in my code, kindly provide assistance to resolve this error.