não funciona o submit

Quando eu aperto o submit na minha página, ele não funciona, ele n insere novos elementos na tabela da página, eu tentei dar uma modificada nos códigos do professor, pois vou fazer um programa, parecido com uma calculadora de fretes para a empresa da minha mãe, segue os códigos:

<h1 class="text-center">Calculadora</h1>

<form class="form">

    <div class="container">
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <label for="invoice">Invoice</label>
                    <input id="invoice" type="number" class="form-control" min="0.1" step="0.1" required />
                </div>
            </div>

            <div class="col">
                <div class="form-group">
                    <label for="frete">Frete</label>
                    <input id="frete" type="number" class="form-control" min="0.01" step="0.01" required />
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="item">Item</label>
        <input id="item" type="text" class="form-control" required /> <!-- required autofocus -->
    </div>

    <div class="form-group">
        <label for="preco">Preço Item</label>
        <input id="preco" type="number" class="form-control" min="0.01" step="0.01" required />
    </div>

    <div class="form-group">
        <label for="quantidade">Quantidade</label>
        <input id="quantidade" type="number" class="form-control" min="1" required />
    </div>

    <button class="btn btn-primary" type="submit">Incluir</button>
</form>

<div class="text-center">
    <button class="btn btn-primary text-center" type="button">
        Importar Negociações
    </button>
    <button class="btn btn-primary text-center" type="button">
        Apagar
    </button>
</div>
<br>
<br>

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>ITEM</th>
            <th>PREÇO ITEM</th>
            <th>QUANTIDADE</th>
            <th>PREÇO FINAL</th>
        </tr>
    </thead>

    <tbody>
    </tbody>

    <tfoot>
    </tfoot>
</table>

<script src="js/calculadora.js"></script>

esse aqui embaixo é o arquivo js que está separado com nome de calculadora.js dentro de uma pasta "js"

var campos = [ document.querySelector('#invoice'), document.querySelector('#frete'), document.querySelector('#item'), document.querySelector('#preco'), document.querySelector('#quantidade') ];

var tbody = document.querySelector('table body');

document.querySelector('.form').addEventListener('submit', function(event) {

event.preventDefault();

var tr = document.createElement('tr');

campos.forEach(function(campo) {

    var td = document.createElement('td');
    td.textContent = campo.value;
    tr.appendChild(td);

});

var tdVolume = document.createElement('td');
tdVolume.textContent = campos[1].value * campos[2].value;

tr.appendChild(tdVolume);

tbody.appendChild(tr);

});