Código não está funcionando. | JavaScript: programando na linguagem da web

Bom dia. Esotu tentando inserir dados de um formulário em uma tabela quando clico em um botão. Porém não está funcionando. Poderiam me mostrar onde estou errando. E aproveitando a pergunta, é possível realizar o cálculo dos dados fornecidos pelo formulário criado, se sim poderiam me ilustrar como fazer. Obrigado.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="debitos.css">
    <title>Document</title>
</head>
<body>
   <header>DÉBITO PREVIDENCIÁRIO</header>

<section class="container">
    <h2 id="form-adiciona">Adicionar Novo Débito</h2>

        <form action="form-debito">
            <div class="">
                <label for="principal">Principal:</label>
                <input id="principal" type="text" placeholder="Digite o valor do principal" class="principal">
            </div>

            <div class="">
                <label for="multa">Multa:</label>
                <input id="multa" type="text" placeholder="Digite o Valor da Multa" class="multa"> 
            </div>

            <div class="">
                <label for="juros">Juros:</label>
                <input id="juros" type="text" placeholder="Digite o Valor dos Juros" class="juros">
            </div>

            <div class="">
                <label for="total">Total:</label>
                <input type="text" name="total" id="total" placeholder="Total">
            </div>

            <button id="adicionar-debito" class="botao bto-principal">Cadastrar</button>
            </form>

            <table class="tabela">
                <tr class="novoDebitoTr">
                    <th>Principal</th>
                    <th>Juros</th>
                    <th>Multa</th>
                    <th>Total</th>
                </tr>

                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>

            </table>

    <script src="adicionar.js"></script>
</section>   



</body>
</html>

var botaoAdicionar = document.querySelector("#adicionar-debito");

botaoAdicionar.addEventListener("click", 
    function (event){
    event.preventDefault();
    var form = document.querySelector("form-debito");
    var principal = form.principal.value;
    var multa = form.multa.value;
    var juros = form.juros.value;
    var total = form.total.value;

    var novoDebitoTr = document.createElement("tr");

    var principalTh = document.createElement("th");
    var mutlaTh = document.createElement("th");
    var jurosTh = document.createElement("th");
    var totalTh = document.createElement("th");

    principalTh.textContent = principal;
    mutlaTh.textContent = multa;
    jurosTh.textContent = juros;
    totalTh.textContent = total;

    novoDebitoTr.appendChild(principalTh);
    novoDebitoTr.appendChild(mutlaTh);
    novoDebitoTr.appendChild(jurosTh);
    novoDebitoTr.appendChild(totalTh);

    var tabela = document.querySelector("#tabela");
    tabela.appendChild(novoDebitoTr);
})