Investigué esto y parece que es complicado o al menos no es simple usar una variable declarada en JavaScript en un documento HTML varias veces.
Por ejemplo, tengo varios (cientos) de div con declaraciones IMG que hacen referencia a diferentes archivos JPG. Quiero dar una ruta a esos archivos que sea la misma en cada div, y quiero poder declarar el texto de la ruta en una variable y usarlo en cada línea. Esto me daría la posibilidad de cambiar la ruta simplemente cambiando la variable. El hecho de que lo usaría varias veces significa que "id=" no funcionaría, ya que solo se puede usar una vez.
Es una pena que no haya una forma sencilla de hacerlo, ya que estoy seguro de que sería muy útil. Sería útil un ejemplo usando un IMG en un DIV.
Ejemplo:
<div class="column"> <img src="SomePathtoFile/images/1.jpg" class="myimages" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> </div>Quiero que "SomePathtoFile" sea una variable utilizada en este y todos los siguientes div.
No estoy al 100% en lo que está tratando de lograr, pero a primera vista parece un trabajo para atributos de datos
Puede crearlos con el nombre que desee: enlace de datos, imagen de datos, datos, lo que sea, y luego obtenerlos/establecerlos con JS.
<span class="foo" data-info="nice"> // Get span.dataset.info // Set span.dataset.info = "sweet";Intentaría representar dinámicamente el valor del atributo en cada div al mismo tiempo que se genera el div y su contenido/imagen, lo que debería brindarle una referencia clara a cada uno.
Espero haberte ayudado y haber entendido tu pregunta!
¡Prueba esto!
var imgVariable = "https://i.ibb.co/8BQcPn4/1.png" const nodeList = document.querySelectorAll(".column img"); for (let i = 0; i < nodeList.length; i++) { nodeList[i].src = imgVariable; } <div class="column"> <img src="1.png" alt="first" class="myimages" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" width="50px"> <img src="2.png" alt="second" class="myimages" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" width="50px"> <img src="3.png" alt="third" class="myimages" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" width="50px"> </div>¡Gracias y un saludo!
Supongo que te refieres a algo llamado scoped variable , funciona más js que los atributos de datos, veamos primero este ejemplo scoped variable (ejecutarlo)
let arr = 'abcdef'.split('') arr.forEach(x => createButton(x)) function createButton(x) { let n = document.createElement('button') n.innerHTML = x n.addEventListener('click', () => alert(x)) document.body.append(n) }y ejemplo de atributo de datos
let arr = 'abcdef'.split('') arr.forEach(x => createButton(x)) function createButton(x) { let n = document.createElement('button') n.innerHTML = x n.dataX=x n.addEventListener('click', e => alert(e.target.dataX)) document.body.append(n) }div/img no es diferente al botón
let arr = 'abcdef'.split('') arr.forEach(x => createButton(x)) function createButton(x) { let d = document.createElement('div') let n = document.createElement('img') n.alt = x n.addEventListener('click', () => alert(x)) d.append(n) document.body.append(d) }