Así que tengo lo siguiente, que funciona bien:
var sidebar1 = document.querySelector("[data-language-key='sidebar-1']").innerHTML; Pero para fines de escalabilidad, me gustaría crear una sidebar de matriz y usar un bucle for para almacenar todos los valores de texto de la sidebar-X . Ya he escrito algo, pero no puedo hacer que la sintaxis funcione.
var sidebar = []; for (var i = 1; i <= 6; i++) { sidebar.push(document.querySelector(`[data-language-key=` 'sidebar-' + i ``).innerHTML); }El valor clave en el querySelector debe tener una cadena. Este tipo de error ocurre generalmente al codificar con DOM. Déjame mostrarte el resultado de tu código.
sidebar.push(document.querySelector(`[data-language-key=` 'sidebar-' + i `]`).innerHTML);Esto se leerá como,
//if i = 0 sidebar.push(document.querySelector(`[data-language-key=sidebar-0]`).innerHTML);Las etiquetas HTML tienen el valor del atributo como una cadena, por lo que el querySelector debe tener una cadena con comillas.
//if i = 0 sidebar.push(document.querySelector(`[data-language-key="sidebar-0"]`).innerHTML);Entonces, para permitir que querySelector funcione, use como,
sidebar.push(document.querySelector(`[data-language-key="` 'sidebar-' + i `"]`).innerHTML);No especifiques el valor de [data-language-key] porque tendrás que editar tu código si agregas nuevos elementos a la barra lateral. Simplemente use ese selector pero con querySelectorAll para recogerlos a todos. Luego map la lista de nodos (después de forzarla a una matriz real) y devuelva el contenido de texto de cada elemento.
const selector = '[data-language-key]'; const els = document.querySelectorAll(selector); const sidebar = Array.from(els).map(el => { return el.textContent; }); console.log(sidebar); <aside> <div data-language-key="1">one</div> <div data-language-key="2">two</div> <div data-language-key="3">three</div> <div data-language-key="4">four</div> </aside>Solo tienes que hacer una variable cada vez en la iteración:
var sidebar = []; for(var i=0;i<6;i++){ var side = document.querySelector('[data-language-key = "sidebar-'+i+'"]').innerHtml(); sidebar.push(side); }