Carregar arquivo javascript após clicar no botão

Eu estou tentando usar um conjunto de caixas de texto para definir alguns dados dentro do meu arquivo JavaScript. Então, em uma caixa de texto, eu insiro um nome de equipe "Nome da equipe" e o arquivo javascript usa essa caixa de texto para armazenar o nome de uma equipe para imprimir um conjunto de colchetes de torneio.

O arquivo javascript está incluído no meu<head> por isso carrega antes de eu ter inserido os dados nas caixas de texto. Eu tenho esse código para um botão no html assim:

script(type='text/javascript')
    $('#buttontest').click(function() {
        $('div.bracket').show();
        $('div.teamList').hide();
    });

Portanto, quando o botão é pressionado, as caixas de texto ficam todas ocultas e os colchetes com os nomes de equipe definidos pelo usuário devem aparecer .... aqui está o código no final do meu arquivo javascript:

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

Então, dentro de div.bracket eu tenho a classe # singleElim8 que o JavaScript usa. Mas como eu iria mudar isso para que este javascript para inicializar os colchetes só é executado uma vez que o botão foi clicado? Dessa forma, os colchetes são processados ​​APÓS as caixas de texto serem preenchidas. Qualquer ajuda é apreciada.

questionAnswers(2)

yourAnswerToTheQuestion