Modifying the function name or element ID in a HTML template can cause it to cease functioning

I'm currently working on developing an app using Django and I've encountered a strange issue.

In my template, I have the following code:

<div class="form-group">
  <input name="Data_inserimento_entry" type="date" class="form-control" id="date_to_turn_into_toda" >              
</div>

<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date(date_to_turn_into_toda) </script> 

In the JavaScript file get_today_date.js located at static > js > get_today_date.js, the function is as follows:

function get_today_date(id_data) {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById(id_data).value = today;
}

When I run the server and load the template, today's date appears in the input field which is expected. Everything seems to work fine.

However, when I make changes to the ID attribute of the input element or modify the function name in both the script tags, such as:

<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date_ID(date_to_turn_into_today) </script> 

And

function get_today_date_ID(id_data) {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById(id_data).value = today;
}

The functionality stops working. I'm trying to figure out why this happens. Is there something wrong with how I'm calling the JavaScript functions?

Could it be that changing the names of the functions is causing issues in another part of the template or JavaScript file?

Note: Both the function in the JavaScript file and the script itself have identical names except for the file extension (.js). Could this potentially be causing the problem?

Update:

In my model, I've defined the following:

class mymodel(models.Model):

    Data_inserimento_entry = models.DateField(blank=False, null=False, default=timezone.now().date() )

Update:

Here is the complete aggiungi_terminologia.html template in response to a request for further clarification:

<!-- Entire HTML content -->

Answer №1

Upon running the server and loading the template, I noticed that today's date automatically populates in the input slot, which pleasantly surprised me.

I am still puzzled by how this function works as it seems to stem from passing a variable rather than a string (ID) into the get_today_date function. For instance, instead of utilizing

<script> get_today_date(date_to_turn_into_today) </script> 

You should use:

<script> get_today_date('date_to_turn_into_today') </script> 

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

Issue with normalizing UV coordinates to a range of 0 and 1 in threejs

I am facing an issue where my model has UV coordinates that are outside the range of 0 and 1. I have attempted to normalize these coordinates with a function, but the results are not as expected. This is the function I am using to convert the UV coordinate ...

Implementing promises when updating data in Firestore with JavaScript on Firebase

I'm looking to redirect the user to another page once their name has been updated. The challenge I'm facing is knowing when to use my location.replace function and how to incorporate promises in this situation. (username.value represents the new ...

Obtain a filtering dropdown list directly from the database within Ag-grid

Currently in my interface, I am attempting to implement a filter for the FOLDER column. This filter is supposed to retrieve data from the database and present it in a dropdown checkbox within that column. The filtering should be based on the selected data. ...

How can one include a URL as a "URL parameter" when using Express?

In my Node.js application, I've set up a router to listen for requests at api/shorten/: router.get('api/shorten/:longUrl', function(req, res, next) { console.log(req.params.longUrl); } When I enter something like: http://l ...

Is there a way to execute a Node 6 npm package within a Node 5.6.0 environment?

I am currently utilizing a tool called easy-sauce to conduct cross-browser JavaScript tests. Essentially, my package.json file references this tool for the test command: { "scripts": { "test": "easy-sauce" } } Everything runs smoothly when I exec ...

Assign a specific index value from a PHP array to a JavaScript variable

Having a large PHP array with 649 indexes, I am looking to assign a specific index value to a JavaScript variable based on another variable. Is there a way to achieve this without loading the entire PHP array onto the client side for speed and security rea ...

How can I pass an array from HTML to Node.js and subsequently store it in MongoDB?

Looking to combine the values of longitude and latitude into one array for input, then store it in the database. While there are plenty of examples on handling arrays, most of them are based on PHP. Check out the following code snippet: HTML <html> ...

Enable permission bypass for Ajax requests on my Django Rest Framework website

I developed this API permission logic: def has_permission(self, request, view): return request.user.is_authenticated and ( request.user.is_superuser or models.AllowedToUseAPIList.objects.filter(user=request.user).exists() ) It checks whe ...

Tips for ensuring the middle row remains sandwiched between the header and footer rows in Bootstrap

After adding styles for img with max-height:100% and max-width:100%, the display looked fine with just images. However, upon further inspection, I noticed that if the middle row (which can contain one or two columns side by side) has multiple images or an ...

Setting variables in AngularJS services without encountering JavaScript undefined errors

After developing an AngularJS module, I attempted to link a service and use it to share variables across the application. While most things are functioning properly, I encountered an issue when trying to set submenu[1] to an object. The error message sta ...

"Encountered an issue with combining multiple meshes that share the same geometry but have

I wrote a loop that generates multiple Mesh objects with various geometries, where each mesh corresponds to a specific texture: var geoCube = new THREE.CubeGeometry(voxelSize, voxelSize, voxelSize); var geometry = new THREE.Geometry(); for( var i = 0; i ...

Tips for implementing lazy loading for a section of a template in Angular 2

I have an Angular 2 component that has several sub-components within it. Some of these sub-components are expensive to load and may not always be necessary, especially if the user doesn't scroll far enough down the page. Although I am familiar with l ...

Despite using .on and .delegate, jQuery seems to be failing to apply to elements loaded via Ajax

I am currently working with Django and utilizing Django Endless Pagination along with Twitter style loading. However, I am facing issues with getting my jQuery code to bind to the newly injected elements. Despite trying to use .on and .delegate as recommen ...

Tips for refreshing the direction route in google-maps-react

I have an array of coordinates, and when I add a new coordinate to the array, I want the route direction on the map to update accordingly. This is the code snippet from my googlemap.js file: /* global google */ import React, { Component } from "react ...

Is it possible to use jQuery animation to smoothly transition the background color?

I'm currently working on a function to dynamically change the background color of a div based on an array of colors. Here's what I have so far: HTML: <div class="bg-color"> CSS: .bg-color { width: 500px; height: 500p ...

Tips on creating animations for elements that are triggered when scrolling and become visible

Is there a way to animate an element when it becomes visible on scroll, rather than at a fixed position on the page? I'm currently using code that triggers the animation based on an absolute scroll position, but I'm looking for a more dynamic sol ...

Using Three.js to Apply Various Materials to an Imported OBJ Model

After creating an OBJ file using Blender with two materials assigned, I successfully imported the file. Now, my question is: How can I assign different materials to the faces in Three.js? I believe the materials need to be included in an array, but I&apos ...

Troubleshooting intersecting objects in THREE.js

Having trouble detecting intersections of extruded objects in THREE.js. The objects are created from a 2D geometry as shown below: var geoShape = new THREE.Shape(vertexes); var geometry = new THREE.ExtrudeGeometry(geoShape, { bevelEnabled: false, amount: ...

Tips for combining Nuxt with Vue Cli 3

section: My current setup involves utilizing Nuxt.js to set up my Vue application. I'm curious if it's feasible to incorporate Nuxt into a Vue Cli 3 project in order to leverage the advantages of both platforms. Surprisingly, there doesn't ...

Obtain an indeterminate value from a variable

My situation involves a dynamic variable assigned from a service, requiring a real-time calculator to update another variable using its value. Below is the relevant code snippet: $scope.getSubTotalSCTax = function(){ TableService.checkOut('SubTo ...