I have researched this and it seems it is complicated or at least not simple to use a variable declared in JavaScript in an HTML document multiple times.
For instance, I have multiple (hundreds) of div's with IMG statements referencing different JPG files. I want to give a path to those files that is the same on each div, and I want to be able to declare the path text in a variable and use it on each line. This would give me the ability to change the path by just changing the variable. The fact that I would be using it multiple times means that "id=" would not work since it can only be used once.
It is a shame there is not a simple way to do this, as I am sure it would be very useful. An example using an IMG in a DIV would be helpful.
Example:
<div class="column">
<img src="SomePathtoFile/images/1.jpg" class="myimages"
onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
I want the "SomePathtoFile" to be a variable used in this and all following div's.
I'm not 100% on what you're trying to achieve, but looks on the face of it like a job for data-attributes
You can create them with any name you like: data-link, data-image, data-whatever and then get/set them with JS.
<span class="foo" data-info="nice">
// Get
span.dataset.info
// Set
span.dataset.info = "sweet";
I'd try to dynamically render the value of the attribute on each div at the same time the div and its content/image is generated, which should give you a clear reference to each.
Hope it helps and that I've understood your question!
Try this!
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>Thanks and best regards!
I guess you refer to something called scoped variable, it works more js than data attributes, let's see this scoped variable example first (run it)
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)
}and data attribute example
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 is no different than button
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)
}