Although I am relatively new to Javascript, I have developed a script that effectively 'greys out' text and inputs within a specified div. This script takes in a boolean value (show) to determine whether the elements should be hidden or displayed, along with the name of the div(s) to target.
The script performs as expected on Chrome and Firefox, but Internet Explorer fails to execute it. After using alerts for debugging purposes, I suspect that the problem lies within this particular line:
var div = document.getElementsByName(divName);
Extracted from the following code:
function hideAndShow(show, divName) {
var hideColor = "#DFDFDF";
// Locate all matching divs and iterate through them
var div = document.getElementsByName(divName);
for (var count1 = 0; count1 < div.length; count1++) {
// Find and iterate through all elements within the div
var elements = div[count1].getElementsByTagName("*");
for (var count2 = 0; count2 < elements.length; count2++) {
if (elements[count2].tagName == "TEXTAREA" || elements[count2].tagName == "INPUT") {
elements[count2].disabled = !show; //Disable
elements[count2].style.borderColor = (show) ? "" : hideColor; // Change border color
elements[count2].value = ""; //Clear existing text
}
}
// Adjust the color of any remaining content, such as text
div[count1].style.color = (show) ? "" : hideColor;
alert(div[count1].id);
}
}
If anyone could offer assistance or guide me in the right direction, I would greatly appreciate it. I seem to be at an impasse!