Find a DOM Element using an attribute-value which is acquired dynamically?

Question

There is already question about getting a dom element by using an attribute value. But mine is different because my attribute value is not known beforehand.

<div class='gameBoard'> <div class="grid" index='0'></div> <div class="grid" index='1'></div> <div class="grid" index='2'></div> <div class="grid" index='3'></div> <!-- Goes up to 100 div / 99 index values --> </div>

I have a div gameboard representing a dom element which contains 100 div, each with the index values from 0 to 99. Below im looping through all the divs and when the mouse hovers over a div, than I gets its index ( data-attribute ). ( if the direction is on the x-axis, then I do this )

 const one = el; const onei = el.getAttribute('index'); const two = el.nextElementSibling; const twoi = two.getAttribute('index');

But when the direction is on the y-axis, I don't need the next div element but the one below. For ex: if index is 0, I need 0 + 10 = 10, so i need the div with index 10. I tried the code below but it is not working cuz the value is retrieved dynamically, I tried using string interpolation and it doesn't work. So please help !!!

 const grids = document.querySelectorAll('.grid'); el.addEventListener('mouseover', (e) => { if (foo === 'destroyer' || foo === 'submarine') { if (currentDirection === 'Y') { const one = el; const onei = Number(el.getAttribute('index')); const twoi = onei + 10; const two = document.querySelector("[index='twoi']"); console.log(two, twoi); } } });

const two = document.querySelector(`[index='${twoi}']`); - Notice the backticks. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Mar 20, 2022 at 20:06
@LouysPatriceBessette can you please put your comment as an answer. It worked 😎😎🙏 Thank you. — Rabten
– Rabten, Commented Mar 20, 2022 at 20:23
There is 3 set of quote in JS, single, double and backtick. Their positionning is important. Missing mispositionning or not escaping them is a common problem. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Mar 20, 2022 at 20:32
Single and double are quite interchangeable in JS while there is common practices (read opiniated or code writing style preference) about which to use depending on the case... Backticks are templating litterals, which is way more powerful. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Mar 20, 2022 at 20:35

Suman Majhi · Accepted Answer · 2022-03-20 20:21:04Z

2

The string concatenation inside querySelector is wrong

It should be working with this below code for that line

const two = document.querySelector(`[index="${twoi}"]`);

edited Mar 20, 2022 at 20:21

answered Mar 20, 2022 at 20:09

Suman Majhi

1662 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rabten Over a year ago

Im getting this error. main.js:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[index=10]' is not a valid selector. at HTMLDivElement.<anonymous> (127.0.0.1:5500/dist/main.js:1:19681)

Suman Majhi Over a year ago

Changed the code a little bit in the ans try this one const two = document.querySelector(`[index="${twoi}"]`);

Joshua Wood · Accepted Answer · 2022-03-20 20:18:01Z

0

Your issue is that of string interpolation. You're literally looking for an element that has the index twoi. Insteady, try interpolating the string with back ticks, e.g.

const two = document.querySelector(`[index='${twoi}]'`);

or just adding the twoi string to it:

const two = document.querySelector("[index=" + twoi + "]");

edited Mar 20, 2022 at 20:18

answered Mar 20, 2022 at 20:12

Joshua Wood

5456 silver badges21 bronze badges

5 Comments

Louys Patrice Bessette Over a year ago

Misplaced backtick and missing quote (for the first code suggestion).

Rabten Over a year ago

I tried that, im getting this error. main.js:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[index=10]' is not a valid selector. at HTMLDivElement.<anonymous> (127.0.0.1:5500/dist/main.js:1:19669)

Joshua Wood Over a year ago

That's my bad. You need to wrap it in single quotes.

Louys Patrice Bessette Over a year ago

Misplaced single quote... lol!

Rabten Over a year ago

it worked, thank you both for your time. 🙏🙏🙏

Collectives™ on Stack Overflow

Find a DOM Element using an attribute-value which is acquired dynamically?

2 Answers 2

2 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Related