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>

// 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

Daily Test with Code Example

Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark></mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
Dynamic variables in JavaScript

Last accessed pages

  1. Draw arrow markers with clicks in html element (1812)
  2. Get Lower, Higher and Closest Number in JavaScript (1663)
  3. Get Time Elapsed (1156)
  4. Constants and Operators (678)
  5. querySelector and querySelectorAll (11354)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1279)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1244)
  3. Tabs effect with CSS (1236)
  4. Contact page - CoursesWeb (1234)
  5. Insert, Select and Update NULL value in MySQL (730)