var dynamic in a function

Question

sorry for my poor English. So this is my question. I want to display images, theses images are defined in a js file. 3 images in this exemple but they can be more than.

In a js file, i have this code

var med1 = {
 title: "Title",
 description: "Description",
 icon: "file/1.png"
};

var med2 = {
 title: "Other Title",
 description: "Other description",
 icon: "file/imagesecond.png"
};

var med3 = {
 title: "The title",
 description: "The description",
 icon: "file/google.png"
};

And in another page, i call this file and execute

function affiche(a,b,c)
{
var x = document.createElement("IMG");
  x.setAttribute("src", a);
  x.setAttribute("width", "100");
  x.setAttribute("height", "100");
  x.setAttribute("alt", b);
  x.setAttribute("title", c);
  document.body.appendChild(x);
}

for (var i = 1; i <= 3; i++) {
console.log('med'+i);
affiche(med+i.icon,med+i.title,med+i.description)
}

In console, i have med1, med2, med3 but "med" is not defined in function. Can you help me to resolve my problem?

https://stackoverflow.com/questions/1664282/how-can-i-refer-to-a-variable-using-a-string-containing-its-name — epascarello, Jan 04 '21 at 19:40
From the link.... `window['med' + i]` but you would be better off using an array or object.... — epascarello, Jan 05 '21 at 21:52

score 0 · Answer 1 · answered Jan 04 '21 at 21:29

0

"med+i" is not a valid variable name. Javascript does not convert that to mean med1, med2, or med3.

You'll either have to call method affiche three separate times, or change med1, med2, and med3 to be an array called med.

answered Jan 04 '21 at 21:29

Russ

4,091
21
32

""med+i" is not a valid variable name. Javascript does not convert that to mean med1, med2, or med3." I know, but is there a way to create this? – Fredd Crdr Jan 05 '21 at 21:11
Look into eval: https://www.w3schools.com/jsref/jsref_eval.asp – Russ Jan 05 '21 at 21:16
Thanks a lot Russ – Fredd Crdr Jan 05 '21 at 21:33

score 0 · Answer 2 · answered Jan 05 '21 at 22:00

To make this actually useable and maintainable use an array. So alter your initial structure to an array. Now you can add to it and remove it without having to alter any code.

var meds = [{
    title: "Title",
    description: "Description",
    icon: "http://placekitten.com/200/300"
  },
  {
    title: "Other Title",
    description: "Other description",
    icon: "http://placekitten.com/150/200"
  }, {
    title: "The title",
    description: "The description",
    icon: "http://placekitten.com/100/300"
  }
];

function affiche(a, b, c) {
  var x = document.createElement("IMG");
  x.setAttribute("src", a);
  x.setAttribute("width", "100");
  x.setAttribute("height", "100");
  x.setAttribute("alt", b);
  x.setAttribute("title", c);
  document.body.appendChild(x);
}

meds.forEach(function (med) {
  affiche(med.icon, med.title, med.description);
})

// for (var i=0; i<meds.length; i++) {
//   var med = meds[i];
//   affiche(med.icon, med.title, med.description);
// }

Now if for some horrible reason you can not alter the code and have to use seperate variables, you have to use the window object to reference it as long as they are global variables.

var med1 = {
  title: "Title",
  description: "Description",
  icon: "http://placekitten.com/200/300"
};
var med2 = {
  title: "Other Title",
  description: "Other description",
  icon: "http://placekitten.com/150/200"
};
var med3 = {
  title: "The title",
  description: "The description",
  icon: "http://placekitten.com/100/300"
};

function affiche(a, b, c) {
  var x = document.createElement("IMG");
  x.setAttribute("src", a);
  x.setAttribute("width", "100");
  x.setAttribute("height", "100");
  x.setAttribute("alt", b);
  x.setAttribute("title", c);
  document.body.appendChild(x);
}

[1, 2, 3].forEach(function(x) {
  var med = window["med" + x];
  affiche(med.icon, med.title, med.description)
});

// for (var i=1; i<4; i++) {
//   var med = window["med" + i];
//   affiche(med.icon, med.title, med.description);
// }

score 0 · Answer 3 · answered Jan 05 '21 at 22:04

0

Thanks epascarello, done.

function run() {
for (var i = 1; i <= 10; i++) {
affiche(window['med'+i].icon,window['med'+i].title)
}
}

Do the job great. But can you say me why EVAL is not the good way!

answered Jan 05 '21 at 22:04

Fredd Crdr

1
1

Fredd Crdr · Answer 4 · 2021-01-05T21:48:45.513

-1

Thank you, Russ, for directing me to this solution

function run() {
for (var i = 1; i <= 10; i++) {
var med = "med";
affiche(eval(med+i).icon,eval(med+i).title)
}
}

Do the job, thx again.

edited Jan 05 '21 at 21:48

answered Jan 05 '21 at 21:42

Fredd Crdr

1
1

why? Have you a better way? – Fredd Crdr Jan 05 '21 at 21:51
https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea – epascarello Jan 05 '21 at 22:04

var dynamic in a function

4 Answers4