Tips for sharing a global variable across numerous functions in various files

<script> 
var words = new Array(); words[1] = 'fresh'; words[2] = 'ancient';
</script> 

<script src="scripts/validation.js" type="text/javascript"></script>

Additionally, in the validation.js file, we find:

function checkValue(num){ 
  alert(words[num]);
}

Is there a way to access the variable value? I keep encountering an error indicating the variable is not defined.

Answer №1

Great effort!

Here's how I handled my multi-language message:

To start, I created an array at the top of the page, close to the HEAD tag.

<script type="text/javascript">
    var language = {};
</script>

Next, I populated the array with values retrieved from the database using a method that best suits your platform. In this case, I used ASP.NET MVC.

<script type="text/javascript"> 
     language["greeting"] = '@Model.greeting';    
     language["farewell"] = '@Model.farewell';    
     //or you can assign values directly
     language["hello"] = 'Hello';
     language["goodbye"] = 'Goodbye';
</script>
<script src="javascript/translator.js" type="text/javascript"></script>

Finally, you can reference the array in your JavaScript file like so:

translate(“farewell”);
function translate(value){ 
   alert(language[value]);
}

//Alternatively:
alert(language[“hello”]);

I hope this explanation proves helpful for you.

Answer №2

Avoid relying on global variables that are referenced across different files as it can lead to confusion for other team members or maintainers trying to understand the code. Instead, make sure to pass all necessary values to a function, which serves as documentation for what the function needs. Consider implementing the following approach:

<script src="javascript/validator.js" type="text/javascript"></script>
<script type="text/javascript"> 
var items = new Array('first', 'second');
checkItem(items, 0);
</script>

Inside validator.js:

function checkItem(arr, index){ 
    alert(arr[index]);
}

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

What is the best way to configure the loading state of my spinner?

When a user clicks to navigate to the articles page, I want to display a spinner while waiting for the articles data to be fetched and displayed. There is a slight delay after the click, hence the need for the spinner. I have a custom spinner component ca ...

Error occurred when attempting to fetch data from a nested JSON object in React/Next.JS

Having trouble retrieving data from my API and encountering this error message. I suspect it may be related to the JSON structure. Interestingly, when using a different URL with nested arrays, it works fine. However, my current data is not cooperating. Any ...

Throttle the asynchronous function to guarantee sequential execution

Is it possible to use lodash in a way that debounces an async function so it runs after a specified delay and only after the latest fired async function has finished? Consider this example: import _ from "lodash" const debouncedFunc = _.debounc ...

A tiny blue spot popping up beside the roster of users

I'm working on a render function that displays a list of users with avatars and names. The issue I'm facing is that when the page initially loads, there's a blue dot to the left of each user. However, if I navigate to another page and then g ...

``There seems to be a problem with the ngb time picker when using the up and

Currently, I am utilizing Bootstrap 4 and NG Bootstrap time picker for a project in Angular 10. Despite correctly adding all the code, I have encountered an issue where the up and down arrows on the time picker are not functioning as expected. Below is a s ...

Encounter an issue during npm installation of electron: "Error verifying the initial certificate."

I recently developed a new app directory and ran the command npm init. However, I encountered an issue while trying to install Electron with the following line of code: npm install electron --save-dev. The error message I received is as follows: > [em ...

Numerous comparisons between ngIf and ngShow are made when dealing with intricate user interfaces and form structures

After searching, I couldn't find a satisfactory answer to my question about when to use ngShow versus ngIf. Alternative to ng-show/-hide or how to load only relevant section of DOM What is the difference between ng-if and ng-show/ng-hide When to fav ...

Error message thrown by Angular JS: [$injector:modulerr] – error was not caught

I have been working on a weather forecasting web application using AngularJS. Here's a snippet of my code: var myApp = angular.module("myApp", ["ngRoute", "ngResource"]); myApp.config(function($routeProvider){ $routeProvider .when('/',{ ...

Display a specific message in a div when the input field is left empty

My goal is to create a div that mirrors the content of an input field. When I type "lalala" in the input, it should show up in the div, and this part is working fine. However, I also want the div to display "The input is empty" when the input itself is emp ...

Enhancing JavaScript Arrays by incorporating data from a JSON file

Could you kindly advise me on what I might be doing incorrectly here? It seems like a simple issue, but it has taken up the entire day. All I wanted to do was add a value to an array called messages from a JSON file. function get_message(params) { va ...

Setting a background image in vanilla-extract/css is a straightforward process that can instantly enhance

I am brand new to using vanilla-extract/CSS and I have a rather straightforward question. I am attempting to apply a background image to the body of my HTML using vanilla-extract, but I am encountering issues as I keep getting a "failed to compile" error. ...

"When utilizing a jQuery AJAX request to communicate with a Node.js server, the functionality only seems to

I'm diving into the world of AJAX and feeling a bit lost. On my webpage, I use an AJAX GET request to fetch comments on a post. However, there's a glitch where the request only succeeds after refreshing the page. I even tried disabling the cache, ...

AngularJS $cookies version 1.6.9 experiencing functionality issues

I recently implemented AngularJS $cookies 1.6.9 in my website to handle cookie management. To test it out, I attempted a basic cookie set like this: $cookies.put('myCookieTest', 'test'); var cookie = $cookies.get('myCookieTest&apo ...

Incorporate a pause into a JavaScript function

Consider the following function: $(document.body).ready(function() { var o = $(".hidden"); $(".about_us").click(function() { o.hasClass("visible") ? o.removeClass("visible") : o.addClass("visible"); }); }); I am looking to add a delay to this f ...

Managing extensive geographical information through HTTP

What is the most efficient way to transmit a substantial volume of map information via HTTP for rendering on the client side? There must be a more effective approach than simply transmitting a JSON file containing all map data. I am interested in how maj ...

Effective Strategies for Preserving Form Input Values during Validation Failure in Spring MVC

I am currently working on validating user input, and I want the user's input fields to be retained in case of any validation errors. This is how I have set up my input fields: <form:input path="firstName" class="text short" id="firstName" value=" ...

In JavaScript, constructors do not have access to variables

Currently, I am attempting to implement Twilio Access Token on Firebase Functions using TypeScript. export const generateTwilioToken = functions.https.onRequest((req, res) => { const twilioAccessToken = twilio.jwt.AccessToken; const envConfig = fun ...

PHP reCAPTCHA integration with AJAX functionality

I have been attempting to integrate a reCAPTCHA into my PHP contact form using AJAX. The goal is to present the user with the reCAPTCHA challenge and allow them to input it. If the input is incorrect, an error message should be displayed without refreshing ...

Local storage synchronization in progress, please hold on

Currently, there seems to be a synchronization issue between the local storage and the server. Countries, cities, and users are synchronized with the server separately through different Ajax calls. The problem at hand is that other JavaScript codes (such ...

Assign a class when a path is clicked using Leaflet.js

My goal is to apply a specific class to the clicked polygon by using the following code: function addClass() { function style(feature) { return { className: "active" }; } } function onEachFeature(feature, layer) { ...