Dynamic javascript variable name using for loop

Question

I have a problem. Was working on this for a long time, but really stuck. Searching in stackoverflow for similar problems did not really help me - as people have a little different issues and I could not implement the answers to my code.

I have a dynamically changing <input> elements, where their ids and values are created by PHP. So, total number <input> elements there can be 1 or even 10+.

HTML:

<input id='photonumb1' type='text' value='001'/> 
<input id='photonumb2' type='text' value='002'/> 
<input id='photonumb3' type='text' value='003'/> 
...

There is also one <input id="totalphotos" /> tag which has a value of how many <input> elements there are created.

I want JavaScript to take the number of <input> elements there are (probably taking a value from "totalnumbers") and take the values of all "photonumb*" (using for() loop I suppose?). Each value of each element is to be assigned as new variable, like:

var photoname1 = 001;
var photoname2 = 002;
var photoname3 = 003;
...

Total variable number depends on how many <input> elements there are created.

I was trying to do the suggestions, like:

totalphotos = document.getElementById('totalphotos').value;

for (i = 1; i <= totalphotos.length; i++) { 
    window[photoname + i] = document.getElementById('photonumb' + i).value;
}

But this did not help me, it just does not create a new variable, if I do console.log(photoname1); for example.

Anyone has a suggesstion for me? Thank you in advance!

----- EDIT--- Hey @Quentin, why marked as duplicate? Maybe the idea of the question might be similar, but I am asking it completely other way, so even the answer that I am looking for is different. Moreover, I have seen that question before, I could not completely understand how it works. Thus for other beginners like me, this question might be way more useful. Thanks.

P.S. I've read that it would not be a good idea to use eval(), so I did not even try it. Maybe there is a way without using this? — StartedFromTheBottom, Dec 11 '14 at 12:00
Creating dynamic variable is not good idea.Why don't just push all values in an array? — Ninad, Dec 11 '14 at 12:16

metadings · Accepted Answer · 2014-12-11T12:20:51.183

1

The window['here'] variable was not "named".

totalphotos = document.getElementById('totalphotos').value;

for (i = 1; i <= totalphotos.length; i++) { 
    window['photoname' + i] = document.getElementById('photonumb' + i).value;
}

Beware also, that the script is executing immediately, so you have to put the script at the end of the HTML.

edited Dec 11 '14 at 12:20

answered Dec 11 '14 at 12:11

metadings

3,798
2
28
37

Hey! That worked smoothly! Thanks a lot, your answer is accepted. By the way, I use this script in `$(document).ready(function (){`, is it also ok, or I still should put the script at the end of HTML? Sorry for asking a dumb question, I'm a beginner. – StartedFromTheBottom Dec 11 '14 at 12:43
1

Yes, that's fine! Use `jQuery(function ($) { })` or `jQuery(document).ready(function ($) { })` - they are the same. – metadings Dec 11 '14 at 12:44

Anders Anderson · Answer 2 · 2014-12-11T12:53:20.203

0

You might have a mistake in the For Loop.

You are comparing i to the length of totalphotos, but it already is the number of the Photos

Try

for (i = 1; i <= totalphotos; i++) { this["photoname" + i] = document.getElementById('photonumb' + i).value; }

edited Dec 11 '14 at 12:53

answered Dec 11 '14 at 12:05

Anders Anderson

433
3
8

Thanks for the suggestion, but still no success. I have found a solution using array, but i want the variables to be `photoname1`, `photname2`, etc., not `photoname[0]`, `photoname[1]`, etc. – StartedFromTheBottom Dec 11 '14 at 12:27
Can you give me a console dump from firefox? – Anders Anderson Dec 11 '14 at 12:28
After `for()` loop I did this: `console.log('photoname1: ' + photoname1);` I got this: `ReferenceError: photoname1 is not defined index.php:452` – StartedFromTheBottom Dec 11 '14 at 12:34
Where does photoname come from? -> AHHH I get it know... Wait a second – Anders Anderson Dec 11 '14 at 12:44

Dynamic javascript variable name using for loop

2 Answers2