Ya hay dudas sobre cómo obtener un elemento dom mediante el uso de un valor de atributo. Pero el mío es diferente porque el valor de mi atributo no se conoce de antemano.

 <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>

Tengo un tablero de juego div que representa un elemento dom que contiene 100 div, cada uno con los valores de índice de 0 a 99. A continuación, estoy recorriendo todos los div y cuando el mouse pasa sobre un div, obtengo su índice (atributo de datos) . (si la dirección está en el eje x, entonces hago esto)

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

Pero cuando la dirección está en el eje y, no necesito el siguiente elemento div sino el siguiente. Por ejemplo: si el índice es 0, necesito 0 + 10 = 10, entonces necesito el div con el índice 10. Probé el código a continuación pero no funciona porque el valor se recupera dinámicamente, intenté usar la interpolación de cadenas y no funciona. no funciona ¡Así que por favor ayuda!

 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); } } });