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
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Dynamic variables in JavaScript

Last accessed pages

  1. Get the value of multiple selected checkboxes with same name (5844)
  2. Read Excel file data in PHP - PhpExcelReader (77580)
  3. Wake Up! (7314)
  4. setTimeout and this with bind() method in JavaScript class (1740)
  5. Update and Delete in MySQL Table (693)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (481)
  2. Register and show online users and visitors (337)
  3. JavaScript Course - Free lessons (250)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (248)
  5. querySelector and querySelectorAll (237)