I would like to call a Javascript function once the button is displayed on screen. What I am looking for is similar to the 'onclick' attribute:

<input type="button" class="button-class" onclick="function(this)">

However, I would like the function to be called as soon as the button is displayed on screen i.e. it should be instantaneous (button creation=function call). I have already tried 'onload' but this does not seem to work. Is there a way to do this please?

Thank you

I would like to call a Javascript function once the button is displayed on screen. What I am looking for is similar to the 'onclick' attribute:

<input type="button" class="button-class" onclick="function(this)">

However, I would like the function to be called as soon as the button is displayed on screen i.e. it should be instantaneous (button creation=function call). I have already tried 'onload' but this does not seem to work. Is there a way to do this please?

Thank you

• javascript
• html
• events
• button
• web

• If you're creating the button using Javascript, just put the call to the function after that code. – Barmar Commented Feb 7, 2018 at 18:29
• @Barmar the button is being created using HTML as shown in the above code snippet. – Questionnaire Commented Feb 7, 2018 at 18:37
• @Questionnaire do you mind if i use jquery – Gerardo BLANCO Commented Feb 7, 2018 at 18:40
• No I dont @GerardoBLANCO – Questionnaire Commented Feb 7, 2018 at 18:56

4 Answers 4

Put an script element invoking the function after the button element

<input type="button" class="button-class" onclick="fn(this)" value="button" id="btn">
<script>
  function fn(obj){
     console.log(obj)
  }
  fn(document.getElementById("btn"));
</script>

@Questionnaire, you can't do what you want since an action should take place for a button (click event) to execute code.

As a good practice, load your Javascript code after the page is done loading. This is to avoid blocking the rendering of HTML code since Javascript is synchronous.

    ...
    <script type="text/javascript">
        function init() {
            // Code for your button function here
        }
        window.onload = init();
    </script>
 </html>

The code above is pretty much it.

Just write the function name in onclick property instead of function(this) like the following..

<script>
    function myFunc(e){
        //do something
    }
</script>
<input type="button" class="button-class" onclick="myFunc(this)">

@Bartman pointed out how the .ready() funtion handled it as a document.ready.

So i came up with a small solution to run the waanted funtion once the input button is created. Hotfix but cant imagine another solution

I hope this helps. If not please add a ment so i can edit the answer.

function clickFunc(e) {
  alert("click event");
}

function loadFunc() {
  alert("load event");
}

$("#button").click(function() {
  $("div").append("<input id=\"but\" type=\"button\" class=\"button-class\" onclick=\"clickFunc(this)\">");
  $("body").append("<script>loadFunc();<\/script>");
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="button" type="button">
<div></div>