Run Javascript function without onclick

Question

I have a Javascript function for creating new form elements on a web page. The function is called by an onclick event.

I can't figure out how to run the function without the onclick event. I need to do this as I have Python code generating content to prepopulate the form elements, but still wish to be able add and remove the form elements dynamically with the Javascript.

Javascript function:

    pcount = 0;
    createinputprice =function (){
        field_area = document.getElementById('pricetable');
        var tr = document.createElement("tr");
        var cella = document.createElement("td");
        var cellb = document.createElement("td");
        var input = document.createElement("input");
        var input2 = document.createElement("input");
        input.id = 'descprice'+pcount;
        input2.id = 'actprice'+pcount;
        input.name = 'descprice'+pcount;
        input2.name = 'actprice'+pcount;
        input.type = "text";
        input2.type = "text";
        cella.appendChild(input);
        cellb.appendChild(input2);
        tr.appendChild(cella);
        tr.appendChild(cellb);
        field_area.appendChild(tr);
        //create the removal link
        var removalLink = document.createElement('a');
        removalLink.onclick = function(){
            this.parentNode.parentNode.removeChild(this.parentNode)
        }
        var removalText = document.createTextNode('Remove Field');
        removalLink.appendChild(removalText);
        tr.appendChild(removalLink);
        pcount++
    }

HTML:

<table id="pricetable">
</table>
<a href='#' onclick="createinputprice()">Add Price</a>
<script type="text/javascript">
    createinputprice();
</script>

The onclick event works fine in JSFiddle but calling the function directly doesn't work at all.

Wait untill the document is [loaded](http://stackoverflow.com/questions/8181061/dom-loaded-event-cross-borwser-native-javascript-code) — DarkBee, Sep 26 '13 at 13:37
Try it on window.onload or document.ready if you are using jquery — Gurpreet Singh, Sep 26 '13 at 13:38
Fair point @j08691, didn't pick up on that... saw the `onclick` and made stupid assumption. I have removed my comment — freefaller, Sep 26 '13 at 13:39
@GurpreetSingh What has jquery to do with this question ? Its vanilla JS — DarkBee, Sep 26 '13 at 13:39
@DarkBee, nothing in particular, basically making same point as you. Wait until the doc is loaded. — Gurpreet Singh, Sep 26 '13 at 13:42
Thank you for the comments here. Taking a closer look in my actual code somehow I ended up with a foreign accent over the top of a character in my variables and then in JSFiddle once I'd corrected the character I had it set to onload rather than no-wrap. Thanks everybody. — , Sep 26 '13 at 14:19

score 7 · Answer 1 · answered Sep 26 '13 at 13:40

7

you can put it into tag using 'onload' event:

<body onload='yourfunction()'>

or just use jQuery:

$(document).ready(function() {
    yourFunc();
});

answered Sep 26 '13 at 13:40

SkSirius

156
1
9

score 1 · Answer 2 · answered Sep 26 '13 at 13:43

I suppose you could use <body onload="yourfunction()"> you also should look into http://www.w3schools.com/js/js_htmldom_events.asp.

As you can see there are quite a few events available in javascript one should allways pick the right tool(event) for doing the work.

Ishan Jain · Answer 3 · 2013-09-26T13:48:33.473

1

If you want to call jquery function on Page load: you can use $(document).ready(function(){});

For example:

Jquery-

<script type="text/javascript">
    $(document).ready(function(){
       createinputprice();
    });
 </script>

and you can also fire the click event in Jquery:

HTML-

<a id="myLink" href='#' onclick="createinputprice();">Add Price</a>

Jquery-

 <script type="text/javascript">
     $(document).ready(function(){
          $('#myLink').click();
     });
 </script>

edited Sep 26 '13 at 13:48

answered Sep 26 '13 at 13:43

Ishan Jain

8,063
9
48
75

1

It is entirely unnecessary to load jQuery for something this basic. – j08691 Sep 26 '13 at 13:44
1

Yes, It's not a perfect answer for this work. but, i post this because user want to run function directly, not onClick event. – Ishan Jain Sep 26 '13 at 13:53
1

The code works fine as it is, see my comment above and the link to jsFiddle. – j08691 Sep 26 '13 at 13:53

Run Javascript function without onclick

3 Answers3