I just started Javascripting about a week ago and have had fairly good success with the API, but need a little push to make a bit of code more efficient.
I have a number of html inputs "checkbox", "button" that control layer visbility. They all contain the " disable " attribute by default so that they are not useable when the application loads. The dependent layers are not functionally useful until the map is zoomed into about the 6th - 11th scale levels.
On "extentChange", at a specified scale, I fire off a function to remove the " disabled " attribute from the inputs thereby enabling them and vice versus when zomming back out.
However, the only way I have found to make this work is by using "getElementById" which natively only supports the passing of "1" specific "Id", which would mean that I would have to have 35 nearly idenitcal functions, which is very inefficient...or find a way to pass an array of Ids to it...looked into it...couldn't figure it out.
Since all of the inputs in question are the "only" input tags in the app I tried the getElementsByTagname("input"), but I haven't yet figured out how to loop through the resulting NodeList, or Array, to affect the change on all of them.
Here is what I am using currently:
//Listener
dojo.connect(map, "onExtentChange", bufferInputControl);
//Function
function bufferInputControl (extent, delta, outLevelChange, outLod) {
var inputOffOn = document.getElementById('0');
if (outLod.level < 6) {
inputOffOn.disabled = true;
} else{
inputOffOn.removeAttribute("disabled");
}
}
//Input
<input disabled type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();'/>
Anybody have any thoughts on how to make this most efficient for controlling the " disabled " attribute of 35 Inputs?
Thanks!
