How to change TXT color Onclick
Hello,
I am some trouble changing the color of the text when the button is clicked looking for anyone who can help.
Thanks
Dave
// subfileWidget.js
/***
* This creates a useful method that allows you to retrieve
* html elements by their style class name.
*
***/
document.getElementsByClassName = function(cl) {
//create an empty array.
var retnode = [];
//Create a regular expression for searching
//for the classname that was passed in.
var myclass = new RegExp('\\b'+cl+'\\b');
//gets a list of all of the elements on the page.
var elem = this.getElementsByTagName('*');
//Loop through all the elements and check for the
//passed in class name.
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
//Use the regular expression to check the class name.
if (myclass.test(classes)) {
//add the element that matches to the array that gets returned.
retnode.push(elem[i]);
}
}
return retnode;
};
//We will be overriding the existing body.onload method with some of
//our own code. We want to be sure to execute the existing onload code
//so we save a reference to the old onload method in document.body.oldOnload.
document.body.oldOnload = document.body.onload;
//Define the new document.body.onload.
document.body.onload = function (){
//if the oldOnload exists, execute it.
if(document.body.oldOnload){
document.body.oldOnload();
}
//call the initSubfileWidget Method.
initSubfileWidget();
};
/**
* This method is used to initialize the subfile widget to do
* row highlighting when the row is clicked.
**/
function initSubfileWidget() {
//use the newly created method of getElementsByClassName to find
//all of the subfile tables on the page.
var subfileTables = document.getElementsByClassName('HATSTABLE');
//loop through all of the subfile tables
for(var i = 0; i < subfileTables.length; i++){
//find all of the input elements in the table.
var radios = subfileTables[i].getElementsByTagName('input');
//Loop through each of the input elements, checking for radio buttons only.
for (var j = 0; j < radios.length; j++){
if(radios[j].type.toUpperCase() == "RADIO"){
//save the old onclick function as oldOnClick for execution later.
radios[j].oldOnClick = radios[j].onclick
//attach the new onclick function, being sure to call the oldOnClick function if it exists.
radios[j].onclick = new Function("if(this.oldOnClick)this.oldOnClick();hig hlightRow(this);");
//call a function to attach even handlers to the rows so they can handle an onclick.
attachCellEvent(radios[j]);
//hide the radio buttons.
radios[j].style.display = 'none';
}
}
}
}
/**
* This function modifies all of the cells in the row of the radio button (passed
* in as element) to properly highlight the row.
**/
function attachCellEvent(element){
//Find the parent row for the radio button (element parameter).
var tr = element.parentNode;
//Loop until you have a reference to the TR element.
while(tr.tagName.toUpperCase() != "TR"){
tr = tr.parentNode;
}
//Find all of the cells in the row.
var cells = tr.getElementsByTagName('td');
//Loop through each of the the cells.
for(var cellIndex = 0; cellIndex < cells.length; cellIndex ++){
//Getting the actual text of the function for the onclick event.
var functionText = cells[cellIndex].onclick;
//Use a regular expression to find the name of the radio button that must be clicked.
var regexp = /HATSForm\.subfile\_radiobutton_\d+/;
var radioName = regexp.exec(functionText);
//Save the old onclick even handler as oldOnclick.
cells[cellIndex].oldOnclick = cells[cellIndex].onclick;
//define a new onclick event handler, that calls the oldOnclick if it exists. Also,
//it calls the click function of the radio button in the row (for highlighting purposes).
cells[cellIndex].onclick = new Function("if(this.oldOnlclick)this.oldOnclick();"+ (radioName ? radioName + ".click();" : ""));
}
}
/**
* This function highlights the row that the element (radio button) belongs to.
**/
function highlightRow(element){
//first, clear any previous highlighting.
clearAllHighlighting(element);
//Find the parent row element.
var tr = element.parentNode;
while(tr.tagName.toUpperCase() != "TR"){
tr = tr.parentNode;
}
//save the old style class name as tr.oldStyle (will be used later to re-display
//the original style when another row is selected.
tr.oldStyle = tr.className;
//set the new style classname.
tr.className = 'HATSTABLESELECTEDROW';
}
/**
* This function clears all the previous highlighting that may exists.
**/
function clearAllHighlighting(element){
//Find the parent table node.
var table = element.parentNode;
while(table.tagName.toUpperCase() != "TABLE"){
table = table.parentNode;
}
//get an array of all of the TR (row) elements.
var rows = table.getElementsByTagName("TR");
//Loop through each row.
for (var k = 0; k < rows.length; k++){
//Any row that has been highlighted will have an "oldStyle" attribute.
//Set the style class back to the oldStyle, so as to remove highlighting.
if(rows[k].oldStyle){
rows[k].className = rows[k].oldStyle;
}
}
}