Is it recommended to employ a switch statement in order to link CSS IDs with JavaScript variables?

function getVariableFromID(ID) {
    switch (ID) {
    case "GTA1":
        return GTA1;
    case "GTA2":
        return GTA2;
    case "GTA3":
        return GTA3;
            ...
    case "GTJ0":
        return GTJ0;
    }
}

In my code, I have implemented a switch statement that maps the #id of a DIV tag to a corresponding JavaScript variable using .attr. Each alphanumeric ID represents a unique square on a grid similar to a chessboard, with a total of 100 squares. I am exploring if there are more efficient or concise methods to achieve this functionality, or if the current implementation is the most straightforward approach.

Answer №1

Instead of having 100 different variables and using a hundred conditions in a switch statement, consider utilizing an array. This array can contain strings, numbers, or objects. Simply declare the array with as many elements as needed and use the ID number to access the corresponding index within the array.

arrData = ["value1", "value2"]; // Can be an array of strings, numbers, or objects.
function getValueFromID(ID) {
    index = parseInt(ID.replace("Data", ""));
    return arrData[index-1];
}

Answer №2

I agree with Adil's suggestion to simply return the ID directly.

function retrieveIDValue(ID) {
        return ID;
}

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

The retrieval of data using PHP, MYSQL, and AJAX is unsuccessful

A dropdown menu contains the names of months, represented by numbers from 1 to 12: When a month is selected, I want to retrieve data from a database to display relevant tournaments for that specific month. The SQL code has been tested and confirmed to be ...

The data in the partial view is not being properly shown by using ng-repeat

Welcome to my code snippets! var app = angular.module("AppModule", ["ngRoute"]); app.factory("DataSharing", function () { return { value: 0 } }); // Setting up Routing app.conf ...

If there is only one remaining option after applying the angular filter, automatically choose that option

Currently, I have a scenario where there are two select boxes. The selection in one box acts as a filter for the other box. In some cases, this filter results in only one option left in the list. I am exploring options to automatically select that lone opt ...

Ways to conceal components upon clicking a different element

Struggling to make this jQuery function properly. I have a form with all fields contained in a div.form-group. The subscribe button is identified by the id subscribe. I'm aiming to hide the form fields when clicked, but my JavaScript doesn't see ...

What are some solutions for dealing with NodeJS heap memory errors?

I am currently working with a NodeJS connected database that is 723.1 MB in size, and I am running into memory size issues. To make my database available as an API for use in my VueJS application, I have successfully rendered all the necessary data from a ...

An issue has arisen when trying to fetch and parse data using React and JavaScript

I am currently facing some challenges with fetching data from an API and displaying it using React. I have encountered errors and I am struggling with parsing the JSON response from the API. I believe that converting the response into an array may help res ...

Is there a way to identify the specific list item that a draggable element has been dropped onto within a jQuery sortable with connected draggable lists?

Take a look at these two sets of items: user's inventory <ul id='list1'> <li>Apple</li> <li>Banana</li> </ul>available products <ul id='list2'> <li>Orange</li> ...

Displaying a ReactJS component inside a map function by giving it a unique identifier

When I click on a button within a .map function, I want only the component I clicked on to be displayed and not repeated in all the others. Currently, the behavior of the component is as follows. https://i.sstatic.net/FxsGC.png Clicking on the three dots ...

Efficient method for quickly updating the color scheme of a grid of squares in JavaScript

Currently, I am developing a JavaScript game that features a 2D array of squares with background colors that update each frame. My current approach involves utilizing a borderless DOM table and setting the style.backgroundColor property of each cell every ...

Utilizing JavaScript for Formatting and Comparing Dates

Here, I would like to compare the current date with a user-inputted date. <script type="text/javascript"> $(document).ready(function(){ $("#date").change(function(){ var realDate = new Date(); var startDate = new ...

CSS Causing Numbers to Display in the Incorrect Direction

I'm attempting to showcase numbers in a single line using CSS. It's almost perfect, except the numbers are appearing in reverse order (e.g. 4 - 3 - 2 - 1 instead of 1 - 2 - 3 - 4). I've tried utilizing "direction: ltr" without success. My C ...

Eliminating the flickering effect while scrolling to an anchor using jQuery

While Jquery is working as expected, I'm struggling to eliminate the annoying flash that occurs when clicking on anchor links. The use of return false; in the go-to-top function seems to be helping. Additionally, I'd like to retain the #pageurl ...

Arrange HTML elements in Angular based on the scope variable

I am faced with a dilemma of displaying two divs on a page, where the order is determined by a variable in the scope. One way to approach this is by duplicating the code for the divs on the page, each time arranging them differently: <div class="optio ...

Click the button to collapse the dropdown menu - Angular Material

Currently, I have implemented the selectTo dropdown feature in angular material design. Here is the code snippet that I am using: <mat-form-field id="inputClick" appearance="outline" (click)="Valid()"> <mat-label>{{'GENERAL.TITLE' | ...

Find the nearest class name in proximity

I am attempting to find the closest anchor element with a class that has been clicked. However, not all links will have a class assigned to them, so I need to consider the parent class as well. Since the class names will vary, hardcoding specific class nam ...

Tips for populating an array with information gathered from an axios request within a React application

Currently, I am using axios to fetch data from an API and attempting to store the retrieved data in a variable that represents an array within the state of the component. However, when I try to do so, I encounter the following error: Objects are not valid ...

Unable to interact with element within an iframe during automated testing

I've been struggling with this issue for two days now and I just can't seem to solve it. I'm working on an automation Proof of Concept project (although I doubt I'll get the job) where I need to automate a task on an Oracle page. The p ...

Having trouble getting my image and text to align properly in two columns

<img id="story_image" src="images/builder_story_side.png" alt="photo"/> <div id="story_right"> <h2 class="story_header">fdgdfgdfgdfgdfgfdgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg</h2> <p ...

Rearranging the @use directive in Sass

Here are some style snippets: tokens.scss .text-center { text-align:center; } .bold { font-weight: bold; } @mixin text-style-1 { font-size: 1.2rem; font-weight: bold; } component/card.scss @use "../token.scss" as tokens; .card { @i ...

Transferring information to React (Native) hooks in a way similar to how it is done

Transitioning to Hooks in React Native has been a new learning curve for me, especially when it comes to passing data to child elements. In the past with class-based components, passing props was as simple as using XML-style syntax. A Simple Example using ...