execute a JavaScript function targeting particular CSS .class selectors

I have a unique Java library that includes a special function used for converting English numbers to Persian. Here's an example:

persianJs("345").englishNumber().toString(); //returns: ۳۴۵

In my HTML setup, I want to display dynamic numerical values in Persian format using the following structure:

<span class="price"><!-- price amount --></span>

Is there a way to execute this JavaScript function in either the header or footer section to automatically showcase any price amount in Persian?

Answer №1

If you want to convert all the .price span elements on your website to English numbers, you can use the following code:


window.onload = function(){
  var elements = document.querySelectorAll('.price');
  elements.forEach(function(element) {
    element.textContent = persianJs(element.textContent).englishNumber().toString();
  });
}

Answer №2

Here is a simple method to retrieve the text content of an element with the class name "price": document.getElementsByClassName("price")[0].innerText

//var pNumber =persianJs("345").englishNumber().toString(); //returns: ۳۴۵
var pNumber="۳۴۵";
document.getElementsByClassName("price")[0].innerText=pNumber;
<span class="price"><!-- price amount  --></span>

Answer №3

Although I may not be entirely aligned with your perspective, I believe it is crucial to define a specific function that will activate whenever necessary. This function should scan all relevant areas where price adjustments are required.

For example:

function updatePrice() {
   return persianJs("345").englishNumber().toString();
};

window.onload = function(){
    let elements = document.querySelectorAll('.price');
      if(elements && elements.length) {
         elements.forEach(el => el.textContent = updatePrice())
      } 
}

This is just my interpretation of the issue you're facing, so please correct me if I'm mistaken...

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

Progress bar powered by Ajax to enhance Django file uploads

As a newcomer to Django and JavaScript, I have a question about file uploading on my website. The situation is as follows: 1) My site has a file upload feature built in Django with the following logic: def page_query(request): ... if request.meth ...

What are the best methods for obtaining live data for my web application?

In my current project, I have developed an HTML5 web application that displays various icons on Google Maps. The front-end is built with AngularJS and JavaScript, while the backend consists of a WebAPI, Entity Framework, and SQL database. At the moment, t ...

How can one easily implement a countdown timer in an Ionic 3 app?

Easily create an Ionic3 timer set to 2 minutes that displays countdown like 1:59, 1:58, and finally reaches 00:00. Once the timer hits 00:00, a block of HTML content will be shown. ...

When attempting to pass an AJAX JavaScript variable to a Django view, an AttributeError is encountered stating, "The 'WSGIRequest' object does not have an attribute 'data'."

Attempting to pass the JavaScript variable this.click from my .js file to my Django view class Click through Ajax is resulting in the following error message... AttributeError: 'WSGIRequest' object has no attribute 'data' This is my v ...

Running a function exported from a string in Node.js

Is it possible to execute a function with a name stored as a string in Node.js? The code is meant to run on the server side without any browser involvement. If I have a file named test.js exported with the following function: module.exports.test = functi ...

Display some text after a delay of 3 seconds using setTimeOut function in ReactJS

When using React JS, I encountered an issue where I am able to display text in the console after 2 seconds, but it is not appearing in the DOM. const items = document.getElementById("items"); const errorDisplay = () => { setTimeout(function () { item ...

Which is the ideal library for creating this specific chart - shown in the image in the description - in reactjs?

After numerous unsuccessful attempts, I have finally decided to seek help in creating this chart. I would highly appreciate any assistance that can be provided. https://i.sstatic.net/jtQ3I.jpg ...

Using React Hooks to render radio buttons within a map iteration

My code contains a nested map function where I try to retrieve values from radio buttons. However, the issue is that it selects all radio buttons in a row instead of just one. Below is the snippet of my code: <TableHead> <TableRow> ...

I'm encountering an issue where the this.props object is undefined even though I've passed actions to mapDispatchToProps. What could

Summary: The issue I'm facing is that in the LoginForm component, this.props is showing as undefined even though I have passed actions in mapDispatchToProps. I've debugged by setting breakpoints in the connect function and confirmed that the act ...

Issue encountered while utilizing combineReducers: "Error: The assetsReducer returned an undefined value during initialization."

Issue: The "assetsReducer" has returned an undefined value during initialization. When the state passed to the reducer is undefined, it must explicitly return the initial state, which cannot be undefined. If no value is set for this reducer, consider using ...

The font size on my website fluctuates up and down every time I refresh the page or navigate to a different one

I am currently in the process of updating my research lab's website using a Jekyll framework with Bootstrap. However, I have encountered an issue where the font size grows slightly whenever I navigate to a new page or refresh the current one, before r ...

Navigational bar customization: Troubleshooting search button functionality

I've been encountering some challenges with the search form in bootstrap 4.1's navbar. I've been referring to this documentation link for assistance. The search form I have set up appears quite typical for bootstrap: https://i.sstatic.net/I ...

Ways to retrieve the identifier of a specific element within an array

After successfully retrieving an array of items from my database using PHP as the backend language, I managed to display them correctly in my Ionic view. However, when I attempted to log the id of each item in order to use it for other tasks, it consistent ...

What is the best way to integrate an asynchronously initialized API with a Vuex state?

As I delve into the world of Vue + Vuex, I find myself grappling with the challenge of initializing an API that relies on asynchronous methods. The common solutions I've attempted so far have hit roadblocks - can't use await outside an async fun ...

:host ::ng-deep is not properly cascading styles to material checkbox

Struggling with changing the background color of a checkbox in a material multiselect. I've attempted both .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; } and :host ::ng-deep .mat-pseudo-checkbox-checked { background-color: ...

How can I achieve a floating effect for a div element that is contained within another element?

I have a container located within the body of my webpage. This container has margins on the left and right, as well as a specified width. Inside this container, there is a div element that extends beyond the boundaries of the container to cover the entire ...

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

I have designed a menu-header section for my website, inspired by this image. I created a fiddle to showcase it. However, I am facing an issue where the dropdown elements for "PROGRAMS" and "WORLD OF NORTHMAN" should start from the border of the header ins ...

What is the process for filtering records by a date greater than in the Material Table?

How can I filter the Material table by date values greater than the current value? I've been able to filter by exact date so far, but I need to filter all values that are greater than or equal to the current value in the table. <TableMaterial ...

What could be causing my website to redirect to a blank page after submitting the form?

I am currently working on a Django project where I need to create a form to update a list. It's been a while since I last used Django, and I've hit a roadblock. Below is the content of my urls.py file within my app: from django.urls import path ...

Is there a way to retrieve the current route on a custom 404 page in Next.JS?

I have set up a custom 404 page for my Next.JS application (404.js). I want to display a message stating The route <strong>/not-a-route</strong> does not exist, but when I use Next.js's useRouter() and router.pathname, it incorrectly ident ...