Modifying element information in JavaScript for a Django/Heroku web application

Is it possible for me to update the values of a data object within my JavaScript code? My JavaScript receives post messages from an iframe, and I need to store this information in the correct objects. However, I am unsure if this can be done on the HTML surface or within the JavaScript environment.

I can use

{{ game.high_score}}

in the HTML to retrieve the high score of a specific game object. But when trying to send values to these objects from JavaScript, I seem to be struggling with the process.

The latest attempt I made was simply:

game.gameData.name = somevalue;

in the JavaScript code, but it appears that this doesn't actually change the global value for this data object (the change is not reflected outside of the JavaScript).

Are there effective methods for handling this issue both within and outside of JavaScript in a Django/Heroku environment?

Edit:

I don't have trouble retrieving data from POST, but rather how to modify a game object's value using a JavaScript-based value. The structure of my game class object is as follows:

class GameInstanceDto:
def __init__(self, base: GameIdentityDto, high_score: int, state: str):

    self.base = base,
    self.high_score = high_score,
    self.state = state

If I can display the game-specific highscore in the HTML using

{{ game.high_score }}

and wish to change its value in JavaScript, I attempted:

game.high_score = "2500";

just to test if the high_score value would update, however, I did not observe any changes.

Answer №1

Let's approach this step by step, starting with the changes you want to make to your model.

Modify {{ game.high_score }} using JavaScript

<div id="high_score">{{ game.high_score }}</div>
<script>
    var high_score = document.getElementByID('high_score');
    high_score.innerHTML = 2500;
</script>

If you need to send it back as a POST request, consider converting the high_score element into an input field within a form.

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

Trouble with FilterBy Feature in Bootstrap-Table

I am attempting to use filtering functionality with a table that is populated via JSON, utilizing bootstrap-table by wenzhixin. HTML snippet: <button class="btn btn-primary" id="filterBtn">Filter</button> <div class="container"> &l ...

Retrieve all items from the firebase database

I have a query. Can we fetch all items from a particular node using a Firebase cloud function with an HTTP Trigger? Essentially, calling this function would retrieve all objects, similar to a "GET All" operation. My next question is: I am aware of the onW ...

Steps for assigning a 404 status code upon promise rejection

My approach to testing the login functionality involves using promises and chaining them. If the user enters an invalid password, the data is rejected; otherwise, it is resolved. I then verify if the user is logged in successfully by chaining these methods ...

React: An error has occurred - Properties cannot be read from an undefined value

THIS PROBLEM HAS BEEN RESOLVED. To see the solutions, scroll down or click here I've been working on a React project where I need to fetch JSON data from my server and render it using two functions. However, I'm encountering an issue where the v ...

The function replace does not exist in t(…)trim

I encountered an error in my code that breaks the functionality when checked using console.log. var map = L.map('map').setView([0, 0], 2); <?php $classesForCountries = []; if (have_posts()) : while (have_posts()) : the_post(); ...

Is there a way for me to incorporate a feature that verifies whether an email address is already registered before allowing the person to sign up?

I am currently working with Node.js, express.js, mongoose, and pug to develop a registration/login system. I have successfully stored the name and email in a mongoose database with specified schema for these fields. The data is sent from a pug page via a p ...

Transition within Vuejs moves forwards and backwards, with a unique feature that allows it to skip directly to

I am in the process of developing a slider element that consists of only 2 items. My goal is to ensure that these items smoothly slide back and forth to the left and right when I click on the back or next button. While everything functions correctly when I ...

Jquery failing to properly loop text effect

I attempted to continuously display text using the fadein and fadeout effects. You can see exactly what I mean in this example. Below is the jQuery code where I am trying to cycle through messages: (function() { var message = jQuery("#message_after_ ...

Creating an engaging Uikit modal in Joomla to captivate your audience

I need help optimizing my modal setup. Currently, I have a modal that displays articles using an iframe, but there is some lag when switching between articles. Here is the JavaScript function I am using: function switchTitleMod1(title,id) { document.g ...

Issues with fetching objects using get_object_or_404 in Django

Having trouble with a certain part of my code that’s throwing an error mentioning 'element_id' is not a valid keyword argument. I thought it was because I wasn’t calling the right model initially, but even after correcting that, the issue per ...

Ensuring that only one field is selected with mandatory values using Joi validation

Is there a way to create a validation rule utilizing Joi that ensures if valueA is empty, then valueB must have a value, and vice versa? My current approach involves using Joi for validating an array of objects with properties valueA and valueB. Below is ...

What's the best way to trigger an alert popup after calling another function?

Here are some HTML codes I've been working with: <button id="hide" onclick="hide()">Hide</button> <p id="pb">This paragraph has minimal content.</p> My goal is to have the paragraph hide first when the button is clicked, foll ...

Implementing Keycloak Policies to Secure a Node.js API

Hello everyone, this is my first time reaching out for help here so please bear with me if I miss out on any important information or make some mistakes. Apologies in advance for the lengthy text. Summary of My Objective (I might have misunderstood some ...

Top method for obtaining base64 encoding of an image in Angular or Node.js

Looking to obtain Base64 data for images. Currently utilizing Angular 6 on the frontend and NodeJS on the backend. Should I extract the Base64 string on the frontend or is it better to handle conversion on the backend before returning it to the frontend? ...

Verify and generate a notification if the value is null

Before saving, it is important to check for any null values and alert them. I have attempted to do so with the following code, but instead of alerting the null values, the data is being saved. . function fn_publish() { var SessionNames = getParamet ...

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Working with angular datatables, I have the following code: beforeSend:</p> success callback causes the table on the page not to populate with the data. How can I implement a callback that triggers once the ajax is done without interfering with the ...

With the power of jQuery, easily target and retrieve all label elements within a specified

Currently, I'm working on developing a function that should be executed whenever any of the labels for a particular group of radio buttons are clicked. So, I need a way to reference all the labels in this radio button group. In my search for a soluti ...

Guide to creating nested collapsing rows in AngularJS

My attempt to implement expand and collapse functionality in AngularJS for a section is not yielding the desired result. To demonstrate, I created a simple demo of collapsible/expandable sections in AngularJS which works fine. You can view it here. The ex ...

How to trigger an Angular JS route without loading a view

Could someone help me with calling the /auth/logout url to get redirected after a session is deleted? app.config(['$routeProvider',function($routeProvider) { $routeProvider .when('/auth/logout',{ controller:'AuthLo ...

ReactJS import duplication problem arising from utilizing npm link for component testing prior to npm package release

I have a basic component structured like this. import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } expo ...