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 "window".
Here's an example with each method (explanations are in script code).

1- With eval()

<script type="text/javascript"><!--
// 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 dynamic variable, val';");
alert(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
alert(pre_val);                // test to see the value of pre_val

- To see the reslt of this example, click:

2- With window

<script type="text/javascript"><!--
// 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';
alert(val2);         // show the value of val2

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

- Click to see the result of example above.

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 become the name of a variable, and the text of the selected <option> will be the value of that variable:

<script type="text/javascript"><!--
// 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

<form action="" method="post">Select an option:
 <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>

- In this select list you can test the reslt of the example above.
Select an option:

Daily Test with Code Example

Which tag is used in <table> to create table header cell?
<thead> <th> <td>
  <th>Title 1</th>
  <th>Title 2</th>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){"");
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
Dynamic variables in JavaScript

Last accessed pages

  1. jQuery Drag and Drop Rows between two similar Tables (6738)
  2. Basic HTML elements (3681)
  3. Sport Games (12516)
  4. JQZoom Image Magnifier (9297)
  5. Magic Treasure (283)

Popular pages this month

  1. Flash Games - Free online Games (1536)
  2. Qwop (1269)
  3. Tunnel Rush (1133)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1092)
  5. Drag Racer V3 (823)