Javascript -- Toggle

Javascript –– Toggle
written by: admin

Date Written: 2/1/11 Last Updated: 3/5/22

Example 1: Toggle Box Color

Here is the complete code that was used including the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
<script  type="text/javascript">
function Color(){
var col=document.getElementById('gg').style.backgroundColor;
var col = col.toLowerCase();
col=col.replace(" ", "");
if   (col=="blue" || col=="#0000ff") {
col="red";}
else {
col="blue"
}
document.getElementById('gg').style.backgroundColor=col;
}
</script>
</head><body>
<a onclick="Color();">Anchor</a><br>
<div id="gg" style='width:200px;height:200px;background-color:blue;'> </div>
</body></html>

The principle aspect we will be looking at is:

First the function is called when the Toggle Box Color text is clicked.

document.getElementById('gg').style.backgroundColor=col;

getElementById('gg') is the entire document that contains the id tag of "gg", which in this case is

.style.backgroundColor; is: blue

Browser Differences

In Firefox and IE8 this value is blue
In Opera this value is converted to the hex equivalent, which is #0000ff

The value can be altered with the following:

document.getElementById('gg').style.backgroundColor=col;

where col is the value of the background–color for the element tagged as "gg".

Once the function javascript function is executed the values for col is lost. If I do not want the values to be lost, I need to store the value outside of the function. In this case I stored the value in the element. The element is in the body of the page.

Due to the differences in browsers I always try to reformat it so that the values are the same using

var col = col.toLowerCase();
col=col.replace(" ", "");
var end=col.substring(col.length-1,col.length);
if (end!=";") {end=";";
var col=col+end;
}

The background color in this case has been redefined by Opera into the hex equivalent, so I use

if (col=="blue;" || col=="#0000ff;")

The differences from PHP that should be noted is that the variable here is col not $col and the "or" is represented here by "||". the semicolon at the end of a line is not needed and instead is replaced by using newlines.

Example 2: Toggle fontFamily

Font Family

This is a test of the Emergency Broadcasting System. This is only a test.

And here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
<script  type="text/javascript">
function FontFamily(){
var col = document.getElementById('a1').style.fontFamily;
var col = col.toLowerCase();
col=col.replace(/"/g,"");
if (col=="verdana"){col="tahoma";}
else {col="verdana";}
document.getElementById('a1').style.fontFamily=col;
}
</script>
</head><body>
<a onclick="FontFamily();">Font Family</a>
<div id="a1" style='font-family:Verdana;color:red;'>This is a test of the Emergency Broadcasting System.  This is only a test.</div>
</body></html>

Primarily we will be looking at the FontFamily function used in the code above and here:

Note: IE8 and Firefox both display fontFamily as Verdana, but Opera displays it as "Verdana". With javascript it is very important to keep browser differences like this in mind. If you do javascript can be relatively straight forward and fun!

In order to replace the double quotes I use

col=col.replace(/"/g,"");

Think regular expressions here with / acting as a delimiter and g as the modifier, which in this case means search and replace all occurrences of the double quote.

As a side note

var end=col.substring(col.length-1,col.length);

can be used to locate the last character of a string/variable.

TAGS: javascript