Queryselect element with variable name

Question

Given the element

var inputAbilityName2 = document.getElementById('inputAbilityName2Id');
var inputAbilityName3 = document.getElementById('inputAbilityName3Id');
var inputAbilityName4 = document.getElementById('inputAbilityName4Id');
var inputAbilityName5 = document.getElementById('inputAbilityName5Id');

I then proceed with classList operations

inputAbilityName2.classList.replace('d-flex', 'd-none');

I need to select other elements by changing the number in the name, example I tried:

var idToChange = 5

('inputAbilityName' + idToChange).classList.replace('d-flex', 'd-none');

So that it will read inputAbilityName5.

score 0 · Accepted Answer · answered Aug 11 '21 at 20:06

If variables are in global scope you can use window object to get them:

window["inputAbilityName" + idToChange].classList.replace('d-flex', 'd-none');

If they are not in global scope, than you should use an array to store the elements, or simply get the elements themselves:

document.getElementById('inputAbilityName' + idToChange + 'Id').classList.replace('d-flex', 'd-none');

Queryselect element with variable name

1 Answers1