Javascript Samples

These samples do not necessarily represent total knowledge of each subject such as validation and/or operators, etc.

1: Change an Image

Click the light bulb to turn on/off the light.

function changeImage() {
	var image = document.getElementById('myImage');

	if (image.src.match("light_on")) {
		image.src = "images/light_off.png";
		} else {
		image.src = "images/light_on.png";
	}
}

2: Basic Validation

Please input a number between 1 and 10:

function myFunction() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}

3: Using Operators (+, -, *, /)

Enter a number in each field

and select an operator from the drop-down list

function myMath() {

	var x, y;

	//Get the value of the input field with id="numb1"
	var x = document.getElementById("numb1").value;

	//Get the value of the input field with id="numb1"
	var y = document.getElementById("numb2").value;

	//Convert to Datatype 'Number'
	x = Number(x);
	y = Number(y);

	//Store Selected Operator in a variable 
	//and Display Selected Operator
	var selector = document.getElementById('operator');
	var value = operator[operator.selectedIndex].value;

	//Evaluate the operator in the select field
	if (value == "add") {

		z = x + y;

	} 
	else if (value == "subtract") {

		z = x - y;
	    
	}
	else if (value == "multiply") {

		z = x * y;		   

	}
	else if (value == "divide") {

		z = x / y;

	}

	// Display Operator selected and result
	document.getElementById('display').innerHTML 
	= "The operator is '" + value + "'";
	document.getElementById("demo2").innerHTML 
	= "The result is '" + z + "'";	
};

4: Find the minimum missing value in an Array

Enter a different number in each field between 1 and 50.


function getValue(){

	//Get the value of the input fields"
	var a = document.getElementById("numb3").value;
	var b = document.getElementById("numb4").value;
	var c = document.getElementById("numb5").value;
	var d = document.getElementById("numb6").value;
	var e = document.getElementById("numb7").value;
	var f = document.getElementById("numb8").value;

	//Convert to Datatype 'Number'
	a = Number(a);
	b = Number(b);
	c = Number(c);
	d = Number(d);
	e = Number(e);
	f = Number(f);

	//Create and Array of the entered value
	var A = [a, b, c, d, e, f];

	function isInArray(value, array) {
	return array.indexOf(value) > -1;
	}

	function findMissingValue() {
	  
	     var min = Math.min.apply(Math, A); 
	     var max = Math.max.apply(Math, A); 

	     for (var e=min; e < max; e++) {
	     
	     var x = isInArray(e,A);
	      
	         if (x === false){
	         var missing_value = e;
	         return( missing_value);
	         }      
	     } 
	}

	var result = findMissingValue(A);

	document.getElementById('display_result').innerHTML = 
	"The minimum missing value is " + result + ".";

};

JavaScript Code Samples