Load Javascript File After Button Click

I am trying to use a set of textboxes to define some data within my JavaScript file. So in a textbox I enter a Team name 'Team name', and the javascript file uses this textbox to s

Solution 1:

Just use the getScript method of jQuery

It's very easy to use

$( '#buttontest' ).on( 'click', function() {
    $.getScript( 'url to your js file', function( data, textStatus, jqxhr ) {
        // do some stuff after script is loaded
    } );
} );

Solution 2:

When you pass a function as the parameter to jQuery it will execute that function during document.ready(). It allows your page to load all of the scripts before executing them.

$(function() {
    $('#buttontest').click(function() {
        $('div.bracket').show();
        $('div.teamList').hide();
    });

    $('#singleElim8').bracket({
        init: singleElim8Data
    })
  $('.bracket').hide();
});