Create dynamic variables

Dynamic variables are variabiles that are not set with a specific name in script, their name is dynamically, it can be formed with a string-value from other source (for example from a form field, or other variabile).
JavaScript has not implemented especially dynamic variables (like PHP), but it can be used various methods to achieve the same result; to make a string to become the name, or part of the name, of a variabile.
So, in JavaScript can be used two methods: with eval(), or with the window object.

Here's an example with each method (explanations are in script code).


With eval()

// Sets a variable with a string-value
// The value of this variable will become the name of a dynamic variable
var vari1 = 'val';

// Now, eval() uses vari1`s value to create another variable, having this name
eval('var '+vari1+'= "The value of the dynamic variable, val";');
console.log(val); // Test if the 'val' variable exists

// As part of the name
eval('var pre_'+vari1+'= "Part of the name, pre_val";'); // the pre_val variable is set
console.log(pre_val); // test to see the value of pre_val

With window

// Sets a variable with a string-value
// The value of this variable will become the name of a dynamic variable
var vari2 = 'val2';
// With 'window' we use the value of 'vari2' as key in Array
// The key of the 'window' become a name of variable
window[vari2] = 'Value of - val2';
console.log(val2); // the value of val2

// Or part of the name
window['pre_'+vari2] = 'Value for - pre_val2'; // creates the 'pre_val2' variable
console.log(pre_val2); // the value of pre_val2

When using dynamic variables

Dynamic variables are rarely used in JavaScript, you can write any script without using dynamic variables. But in some cases they are useful, for advanced programmers, they can make the code more dynamically.

Here is an example. The value selected from a Select list becomes the name of a variable, and the text of the selected <option> will be the value of that variable:

<h4>Example dynamic variables</h4>
<p>Select an option in the followig dropdown list.<br>
The selected value becomes the name of a variable, and the option text will be its value.</p>

<select name='select' onchange='example_vd(this.value)'>
 <option id='s1' value='s1'>Option 1</option>
 <option id='s2' value='s2'>Option 2</option>
 <option id='s3' value='s3'>Option 3</option>
</select>

<script>
// this function is called when an option is selected
function example_vd(val3) {
 // with 'window' we create dynamic variable, having in its name the value of 'val3'
 // assign to the dynamic variable the text from the selected option
 window['vd_'+val3] = document.getElementById(val3).innerHTML;

 var test_val = eval('vd_'+val3); // gets the value of the dynamic variable set above
/*
 Because we don`t know exactly the name,
 we need eval() to use the name of a dynamic variable to get its value
*/

 alert('Value of vd_'+ val3+ ' is: '+ test_val); // test the result
}
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Dynamic variables in JavaScript

Last accessed pages

  1. Get and Modify content of an Iframe (17345)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (60187)
  3. The form object (915)
  4. Insert, Select and Update NULL value in MySQL (41036)
  5. PHP MySQL - INSERT INTO (11946)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1436)
  2. Tabs effect with CSS (1371)
  3. Contact page - CoursesWeb (1368)
  4. Insert, Select and Update NULL value in MySQL (793)
  5. PHP getElementById and getElementsByTagName (622)