javascript code to change name of function

Question

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"}
function cloud3(){document.formname.tree3.className="css"}

Answer 1

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');
});

Answer 2

Just pass input name as parameter to

function button(inputname){
document.formname.inputname.className='css';
}

Answer 3

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.

Answer 4

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 (eg 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 ).

Answer 5

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();
}