2

If I set the following up: 

<script type="text/javascript" src="https://test.com/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?

WPZA
  • 841
  • 1
  • 10
  • 27
  • 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 Oct 29 '15 at 23:58
  • 3
    Put the code in a function and assign that function to the onclick of your button. – takendarkk Oct 29 '15 at 23:58
  • 2
    Are you going to ask every single thing you need to do or will you ever use google? – Kickaha Oct 30 '15 at 00:03

3 Answers3

6

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.

takendarkk
  • 3,347
  • 8
  • 25
  • 37
  • Thanks, I understand this but what I cannot figure out is how to put my code (with the src link) in your format as in your example you shown an alert, what would it be for mine? – WPZA Oct 30 '15 at 00:14
  • Just delete the alert and copy/paste whatever javascript you had in the file in the first place. I don't know what _exactly_ it will be because you didn't post any javascript. – takendarkk Oct 30 '15 at 00:16
  • What I posted above was what it is, the link is for a pop out survey on my website, all there is is the src. – WPZA Oct 30 '15 at 00:18
  • I guess what the real question is, is there any way of making that src within the function such that it is ran by the onclick method? – WPZA Oct 30 '15 at 00:22
0

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.net/d6zfqpc6/][1]

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

juan garcia
  • 1,326
  • 2
  • 23
  • 56
0

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.

SK-the-Learner
  • 523
  • 5
  • 18