Hi Everyone,
Part 4 of the Javascript series.
I would like to touch more aspects of Javascript.
===================================================
General Values
To get a value from Javascript, we can use the coding as below. This is applicable for HTML textboxes and dropdowns.
document.getElementById("<elementId>").value;
where elementId is the name of the HTML element.
===================================================
If it is inside a for loop, we can use:
document.getElementById("<elementId>" + i).value;
where i is the counter value.
===================================================
1Styles
We can also use document.getElementById("<elementId>") to change the look of the HTML element.
Examples:
document.getElementById("<elementId>").style.display = "inline";
document.getElementById("<elementId>").style.display = "none";
document.getElementById("<elementId>").style.display = "block";
document.getElementById("<elementId>").style.color = "red";
document.getElementById("<elementId>").disabled = true;
document.getElementById("<elementId>").disabled = false;
document.getElementById("<elementId>").style.backgroundColor = "red";
document.getElementById("<elementId>").style.border = "1px solid black";
===================================================
Get All Items
We can also use the document attribute to return all the items such as radio boxes or check boxes on the webpage. We can then use it to perform validations or any coding related to these items.
The code is shown as below:
var radioButton,checkBox;
radioButton = document.all.item("radioButton");
checkBox = document.all.item("checkBox");
The attribute used here is all.item. radioButton and checkBox returns all the radio boxes and check boxes of the webpage in array format.
radioBox.length will return the total number of radio buttons on the webpage. If there are 5 radio buttons, it will return 5.
We can use a loop to perform any actions related to the items. For example:
for (var i = 0; i < checkBox.length; i++)
{
if (checkBox[i].checked)
{
// coding to be performed when checkBox is checked
}
}
The example below checks a value. If the value is Y and if the check boxes are checked, it will run according to what is defined if this condition is met. If the check boxes are not checked, it will then run according to the what is defined at the else condition.
var value;
if (value == "Y")
{
for (var i = 0; i < checkBox.length; i++)
{
if (checkBox[i].checked)
{
// coding to be performed when check boxes are checked
}
else
{
// coding to be performed when check boxes are not checked
}
}
}
Both radio buttons and check boxes will return either true or false. True is returned when a radio button is selected or when a check box is ticked. The opposite will be returned when the radio button is not selected or when a check box is not ticked.
===================================================
Usage of parentNode
This is a sample HTML code.
<html>
<tr>
<td id='columnOne'></td>
<td id='columnTwo'></td>
</tr>
</html>
parentNode is used to get the element of the previous HTML attribute. If we would like to refer to columnOne from columnTwo, we can use
document.getElementById("columnTwo").parentNode
We can then perform actions according to the Javascript specified.
For example, we can hide the whole row by using this code below:
document.getElementById("columnTwo").parentNode.parentNode.style.display "none";
or
document.getElementById("columnOne").parentNode.style.display "none";
===================================================
That is all for this part of the Javascript series. The usage of document.getElementById can be used for numerous purposes such as retrieving a value of a HTML element such as textbox and dropdowns, displaying and hiding fields, changing the look of a HTML element or to return all the elements of a webpage.
The next series of Javascript will cover HTML events (onblur, onchange, onclick) and more Javascript programming. Stay tuned.
Cheers,
Rogerkoo
