If I set the following up:

<script type="text/javascript" src=""></script> 

Between the head tags, the code runs when the page starts up. Is there any way of stopping this from running during startup and instead running it using the onclick method from a html button?

If I set the following up:

<script type="text/javascript" src="https://test./abc"></script> 

Between the head tags, the code runs when the page starts up. Is there any way of stopping this from running during startup and instead running it using the onclick method from a html button?

• javascript
• html
• onclick

• 2 Why would you want to do this? Why not just trigger the relevant js function you need on the onclick? If you're concerned with page load times, import js files in your footer. – domdomcodecode Commented Oct 29, 2015 at 23:58
• 3 Put the code in a function and assign that function to the onclick of your button. – takendarkk Commented Oct 29, 2015 at 23:58
• 2 Are you going to ask every single thing you need to do or will you ever use google? – Kickaha Commented Oct 30, 2015 at 0:03

3 Answers 3

Take the javascript in your file and wrap it in a function. You can then assign that function to the onclick attribute of a button.

<button onclick="myFunction()">Click Me</button>

And your script

function myFunction() { 
    //your existing code goes here
}

Here's a fiddle.

Although the onclick method is a very nice way, but it is no longer supported.

The addEventListener method is the most suitable and the modern method to do it.

It can be used in two ways:

1. Connecting an already existing function to an event listener:

   document.getElementByID("clickMe").addEventListener("click", myfunction);
   

2. Writing a function within an event listener:

   document.getElementByID("clickMe").addEventListener("click",  function() {
   //a function, for eg.:
   document.getElementById("p").innerHTML = "Hello World";
   });
   

Here’s an example snippet for ease of understanding:

   
document.getElementById("clickme").addEventListener("click", function() {
  document.getElementById("p").innerHTML = "Hello World";
});

<button id="clickme">Try it</button>
<p id="p"></p>

Also, I’d advice you to use the script at the bottom of the page rather than the head, so that the HTML and CSS can load first.

Hope I could help.

1- You should try to avoid adding scripts in the head as it makes slow rendering page. If you really need to do so may be you could look for defer / async scripts.

2- You should try to put the script at bottom in order to make browser rendering all the html and css as fast as possible.

3- Finally at the bottom you should call in the load page. For example in jquery.ready like this doc says, search for jquery ready event. In that moment you should add a listener to the button you need by calling a jquery selector on the button, search for jquery selector, finally you add the click event, search for jquery click event, and then you process what you need inside that callback.

Here is a fiddle.

[https://jsfiddle/d6zfqpc6/][1]

Jquery acts as a good polyfill also to somethings :).