Javascript Course


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
What attribute makes an option from <select> selected?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Option 1</option>
 <option value="val2" selected="selected">Option 2</option>
</select>
What CSS value allows to create color gradients for background?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
What statement creates an array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicate the PHP function used to redirect to other page.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Dynamic variables in JavaScript

Last accessed pages

  1. PHP PDO - Select query, fetch (27646)
  2. Add text between two DIV tags (2964)
  3. PHP Unzipper - Extract Zip, Rar Archives (20160)
  4. Transparent Background, but not the text-content on it (2516)
  5. Highlight Images on click (5695)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (41)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (29)
  3. JavaScript Course - Free lessons (28)
  4. HTML Course - Free Lessons (23)
  5. SHA1 Encrypt data in JavaScript (19)