What is the best way to assign IDs dynamically within an onclick function in Django?

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.

Answer №1

var items= [];
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)
  }
});

modify JavaScript function name to be all lowercase

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Find the item that has a specific value in its sub-property

Information Models: public class Header{ public int Identifier; public int value; public bool anotherValue; public List<Trailer> trailers; } public class Trailer{ public int ID; public Language MyLanguage; public string ...

Determine the Availability of a URL with AngularJS

Looking for a way to verify the existence of a URL like www.testsite.com/mypage using AngularJS. Is this possible? Any suggestions from the community? ...

How can I post data in React/Redux while adhering to a JSON API format?

After creating a form in React and having an API with a JSON API structure that places the response within the data: [] property, I am currently using Axios and redux-thunk to fetch the data. The structure of the data from the form state is as follows: { ...

Warning: Using synchronous XMLHttpRequest on the main thread is no longer recommended as it can negatively impact the user's experience

I encountered an issue with my project while attempting an Ajax request [Warning] Using synchronous XMLHttpRequest on the main thread is now considered deprecated due to its negative impact on user experience. function retrieveReviews() { var reviewsD ...

mapStateToProps was invoked, however componentDidUpdate did not trigger

Working on fetching data for GameChart from an API and updating the Redux state. In my GameChart.jsx file, I have a chart that gets rendered when componentDidUpdate is called. However, there are times when changing the Redux state does not trigger componen ...

Is it necessary for vertex labels to be distinct within a graph?

I am currently developing a browser-based application that allows users to create graphs, manipulate them, and run algorithms on them. At the moment, each vertex is represented by a unique positive integer. However, I am considering implementing labeled ve ...

Looking to integrate my Django application with a MongoDB Docker service

https://i.sstatic.net/gWpZ1.pngLooking to set up two docker services: one for mongodb and the other for a web service built with django. The goal is to connect the web service (django app) to the mongodb docker service. However, I'm unsure of how to ...

Integrate JavaScript code with HTML pages

After creating a basic HTML structure that I am proud of, I encountered some challenges with getting the Javascript to function properly. I am new to working with Javascript and received some initial assistance, but unfortunately, it is no longer working. ...

When the value of a react state is used as the true value in a ternary operator in Types

Attempting to implement sorting on a table is resulting in the following error: (property) direction?: "asc" | "desc" No overload matches this call. Overload 1 of 3, '(props: { href: string; } & { active?: boolean; direction? ...

JavaScript: Preventing Duplicate Keystrokes in Keyboard Input

Currently, I am working on a snake game project as part of my JavaScript course. I have encountered an issue where the game registers a collision when two keys are pressed simultaneously, even though there is no visual collision. https://i.sstatic.net/j42 ...

Safari experiencing CORS violation while Chrome is unaffected

I'm encountering an issue with my React web app that communicates with an Express web server. While everything functions correctly in Chrome, I'm facing an error when accessing the app in Safari: XMLHttpRequest cannot load https://subdomain.exam ...

JavaScript conditional statement malfunctioning

I am currently facing an issue with my JavaScript script. I am using jQuery to send data via AJAX to a PHP file and expecting a text dataType in return so that I can test it with JavaScript. My objective is to redirect the user to another webpage if the t ...

What is the best way to transfer data between windows using titanium (classic)?

'The code I've written utilizes MyHTTPlink to retrieve information such as Restaurant Name, url, and address. Currently, it lists all restaurant names and urls in a table. Now, I want to figure out how to send the details of a table row to the ne ...

Guide to showing MySQL data on an HTML page using NodeJS

Currently delving into Node JS, I am faced with the challenge of displaying fetched data from my MySQL Table in an HTML table format. Despite my efforts, I have yet to find a solution that works for me. Any help or guidance on how to resolve this issue wou ...

Unit tests in Vue 3 do not utilize configureWebpack in vue.config.js

Within my Vue configuration, the following code snippet can be found: configureWebpack: { resolve: { alias: { react: path.resolve(__dirname, 'composition/react'), hooks: path.resolve(__dirname, 'composition'), }, ...

Is it possible to load multiple angular applications within a master angular shell application?

I am searching for a method to integrate multiple Angular applications into a single shell Angular application. The concept involves having different teams develop separate Angular apps that can be loaded within a main shell app visible to end users. Thi ...

Understanding the error handling in Express.js

Learning about error handling in express is new to me and I have a straightforward piece of code like this - const express = require('express'); const MongoClient = require('mongodb').MongoClient; const app = express(); let url = &a ...

Troubles with NextJS and TailwindCSS Styling

I encountered a strange issue when I used the component separately. Here's how the code looked like: <> <Head> <title>Staycation | Home</title> <meta name="viewport" content="initial- ...

Utilizing the power of JavaScript in an HTML file to develop a straightforward price calculator

I am new to the world of HTML coding and currently working on an assignment for my online computer course. I reached out to my professor for help, but unfortunately, he hasn't been very responsive. The task at hand is to create a basic cost calculator ...

tips for using Node Mailer to send emails without using SMTP

Currently, I am facing an issue with sending emails through nodemailer. Although I have successfully used my gmail account for this purpose in the past, I now wish to switch to using my business email to communicate with clients on a regular basis. The cu ...