javascript newbie here. I'm trying to implement template literals to change the second part of a variable name while calling the toggle method with the classlist attribute. Here's what I have:
bigBoxRight.classList.toggle("turnOff");
and this is what i'm trying to accomplish:
bigBox`${player}`.classList.toggle("turnOff");
Player can be both "Right" or "Left" and it's a string. Is this even possible?
Instead of trying to dynamically create variable names, you should get the element you are trying to toggle the class on first.
Assuming bigBoxRight or bigBoxLeft is the id of the element, you can use your template literals to get the element first:
var elem = document.querySelector(`#bigBox${player}`)
Then you can do:
elem.classList.toggle("turnOff");
What I would do is to save another variable that will get the element you need based on your decision and then get the classlist for it
For example
const bigBoxRight = docemnt.querySelector...
const bigBoxLeft = docemnt.querySelector...
const elemRef = true* ? bigBoxRight : bigBoxLeft
elemRef.classList.toggle("turnOff");
*- Your logic for when you need the right or the left bigbox element
Tim's solution might be cleaner if you know when you need the right element or the left