javascript code to change name of function
I have 300 functions with name cloud1=cloud300 that are called onclick on 300 buttons(names of buttons - button1-button300) to change class of 300 textboxes with name tree1-tree300.How can I do this using for loop.
function cloud1(){document.formname.tree1.className="css"}
function cloud2(){document.formname.tree2.className="css"}
开发者_JAVA技巧function cloud3(){document.formname.tree3.className="css"}
First - create a click handler that works irrespective of which button is clicked - this one figures out the name of the supplied element, and replaces button
with tree
:
function clicker(ev) {
ev = ev || window.event;
var el = ev.target || ev.srcElement;
var name = el.getAttribute('name');
var tree = name.replace('button', 'tree');
document.formname[tree].className = 'css';
}
Then, register that same handler on every button
for (var i = 1; i <= 300; ++i) {
document.formname['button' + i].onclick = clicker;
}
See http://jsfiddle.net/alnitak/YHv52/ for a working demonstration.
Of course, it's easier with jQuery, particularly if you did the right thing and used the id
attribute instead of the name
attribute:
$('form[name="formname"] :button').live(function() {
var button = this.id;
var tree = button.replace('button', 'tree');
$('#' + tree).addClass('css');
});
Assuming all functions are global, this should work:
for (var i=1; i <= 300; i++) {
this['cloud'+i].call();
}
But as it was said above, please consider having one function and passing arguments to it. 300 similar functions are a refactoring opportunity.
You can write just one event handler that will take the id of the button (set to the handler name, for extensibility) as param :
<input type="button" id="cloud1" name="test_1" value="Click me" onclick="handler(this.id)">
<script>
function handler(handler_id)
{
this[handler_id].call();
}
Fortunately you don't need to add 300 event handlers for 300 elements. You can use event delegation and attach only one event handler to an ancestor element (e.g. the <form>
) which handles all the click events and decides what to do. This should be 300x faster. :)
Here is a demo to show you how it works.
// add one event handler to the <form>
document.formname.onclick = function(e) {
// normalize event for IE
e = e || window.event;
var target = e.target || e.srcElement;
// if a button was clicked
if (target.nodeName.toLowerCase() == 'button') {
// generate tree name
var name = target.name.replace('button', 'tree');
// apply css class for this element
document.formname[name].className = 'css';
}
};
Note: Assuming that document.formname
is in the parent chain of all the buttons
(it can be simply document
).
Just pass input name as parameter to
function button(inputname){
document.formname.inputname.className='css';
}
精彩评论