Using same variable multiple times in HTML-CodePudding

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 >
<img src="SomePathtoFile/images/1.jpg"       
  onclick="openModal();currentSlide(1)" >
</div>

I want the "SomePathtoFile" to be a variable used in this and all following div's.

CodePudding user response：

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

CodePudding user response：

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 >
    <img src="1.png" alt="first"  onclick="openModal();currentSlide(1)"  width="50px">
    <img src="2.png" alt="second"  onclick="openModal();currentSlide(1)"  width="50px">
    <img src="3.png" alt="third"  onclick="openModal();currentSlide(1)"  width="50px">
</div>

Thanks and best regards!

CodePudding user response：

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

CodePudding user response：

Closest I've found is to use render html using js. Using the dollar & curly braces to enclose your var.

<div id="fileList"></div>
<div id="more"></div>

<script type="text/javascript">

    // local computer path same as html file
    var myPath = "./photos";
    var container = document.getElementById('fileList');
    var div = document.createElement('div');    
    var image = `
        <img src="${myPath}/frog.jpg" 
      onclick="openModal();currentSlide(1)" >
    `;  
    div.innerHTML = image;
    container.appendChild(div); 

    var otherPath = "https://images.freeimages.com";
    var container = document.getElementById('more');
    var div = document.createElement('div');    
    var image2 = `
        <img src="${otherPath}/images/large-previews/f41/white-tiger-1362375.jpg" 
      onclick="openModal();currentSlide(1)" >
    `;  
    div.innerHTML = image2;
    container.appendChild(div);     

</script>