How do I use a JavaScript variable to refer to more than 2 values in different conditions?

Question

hey am trying to write a JavaScript simple game program, my program has two players 1 and 2, i want to write a statement trying to say that "if it is turn for player , add a hidden class to a certain element, and execute some conditions. and if it is player 2 turn, do the same". Yes i know one way of doing it but it is quite long and i wanna try it this way but am getting an error, what can i do. Below is part of my code.

"using strict";

const PLAYER_1_ELEMENT = document.querySelector(".player-1");
const PLAYER_2_ELEMENT = document.querySelector(".player-2");
const TOTAL_1_ELEMENT = document.querySelector(".total-1");
const TOTAL_2_ELEMENT = document.querySelector(".total-2");
const BTN_TRY_LUCK = document.querySelector(".top");
const BTN_RESET_LUCK = document.querySelector(".bottom");
const CURRENT_1_ELEMENT = document.querySelector(".borders-1");
const CURRENT_2_ELEMENT = document.querySelector(".borders-2");
const IMAGES_1 = document.querySelector(".images-1");
const IMAGES_2 = document.querySelector(".images-2")


let player = [1,2];

//statement giving me errors
IMAGES_${player[1]}.classList.add("hidden");

//below are the conditions i want it to execute

if(IMAGES_${player[1]}.classList.contains(".active")) {
    //...................
    //..................
}

You can do that statically. Just doing `IMAGES_2` instead of `IMAGES_${player[1]}` will work. — Extraterrestrial, Jul 22 '22 at 05:03
There is no statement in js like `"using strict"`. Use `"use strict"` — Extraterrestrial, Jul 22 '22 at 05:04
Answered in ["Variable" variables in JavaScript](https://stackoverflow.com/questions/5187530/variable-variables-in-javascript) — Samathingamajig, Jul 22 '22 at 06:13

score 0 · Answer 1 · answered Jul 22 '22 at 05:15

The main problem is this IMAGES_${player[1]} - it seems like you're trying to use a template string to reference a variable.

The code you have is invalid syntax to begin with as template strings need to be wrapped in backticks `

This can be done, but you need to first reference the parent variable and then get the value by passing the variable name as the index. For example:

window[`IMAGES_${player[1]}`]

This would work assuming these variables are declared at the root and not within a separate scope.

To ensure you're calling the right variables regardless of scope, you could store them all in an object like so:

"use strict";

const data = {
    PLAYER_1_ELEMENT : document.querySelector(".player-1"),
    PLAYER_2_ELEMENT : document.querySelector(".player-2"),
    TOTAL_1_ELEMENT : document.querySelector(".total-1"),
    TOTAL_2_ELEMENT : document.querySelector(".total-2"),
    BTN_TRY_LUCK : document.querySelector(".top"),
    BTN_RESET_LUCK : document.querySelector(".bottom"),
    CURRENT_1_ELEMENT : document.querySelector(".borders-1"),
    CURRENT_2_ELEMENT : document.querySelector(".borders-2"),
    IMAGES_1 : document.querySelector(".images-1"),
    IMAGES_2 : document.querySelector(".images-2")
}


let player = [1,2];

//statement giving me errors
data[`IMAGES_${player[1]}`].classList.add("hidden");

//below are the conditions i want it to execute

if(data[`IMAGES_${player[1]}`].classList.contains(".active")) {
    //...................
    //..................
}

Also worth noting that `player[1]` is actually referencing player number 2 (due to 0 indexed arrays) — Rylee, Jul 22 '22 at 05:18

Carsten Massmann · Answer 2 · 2022-07-22T06:05:54.103

Instead of creating variables with calculated names and then referencing them, it is easier in JavaScript to generate an object containing arrays. This object (here: elems) can have local scope and does not have to be globally visible.

const elems={};
"player,total,borders,images".split(",").forEach(el=>elems[el]=document.querySelectorAll(`[class^=${el}-]`));

// Now you can reference the player-related elements
// by doing:

// elems["borders"][0] ... // or
// elems.borders[0] ... // player 1

// elems["borders"][1] ... // or
elems.borders[1].classList.add("active") // player 2

.active {color:red}

<h2>Players 1 and 2</h2>
<div class="borders-1">player 1 borders element</div>
<div class="borders-2">player 2 borders element</div>

In the extremely shortened snippet above the object elems contains collections of DOM elements and not actual arrays. These collections contain player1 and player2 elements in the order they appear on the page. Elements within collections can be addressed by their index. Collections also have a .forEach() method but you will not have access to the customary array methods like .map() or .reduce().

If you want to have actual arrays, simply create them by doing

arr=[...collection]

Hey i tried doing it in that way, i didnt get any errors but when i tried out printing some value on the console like; console.log(DATA[`TOTAL${player}_ELEMENT`].textContent) — Cyber Venom, Jul 22 '22 at 07:18

How do I use a JavaScript variable to refer to more than 2 values in different conditions?

2 Answers2