Array é sempre esvaziado quando adiciono uma nova negociação | JavaScript: conhecendo o Browser e padrões de projeto

Sempre quando estou fazendo uma nova negociação o array só me retorna a negociação atual e não 'soma' com os anteriores.

Código do NegociaçãoController:

export class NegociaçãoController {
    #data
    #quantidade
    #valor
    #listaNegociações
    constructor(){

        const $ = document.querySelector.bind(document)
        this.#data = $('#data')
        this.#quantidade = $('#quantidade')
        this.#valor = $('#valor')
        this.#listaNegociações = new ListaNegociações()
    }

    adicionar() {
        this.#listaNegociações.adiciona(this.#criandoNegociação())

        console.log(this.#listaNegociações.negociações) 


       /*  this.#limparFormulários() */
    }

    #limparFormulários() {

        this.#data.value = ''
        this.#quantidade.value = '1'
        this.#valor.value = '0.0'

        this.#data.focus()
    }

    #criandoNegociação() {

        return new Negociação(
            DateHelpers.textoParaData(this.#data.value),
            this.#quantidade.value, 
            this.#valor.value)
    }
}

Código do listaNegociação:

export class ListaNegociações {
    #negociações
    constructor() {

        this.#negociações = [];
    }

    adiciona(negociação){

       this.#negociações.push(negociação)
    }

     get negociações() {

       return this.#negociações
    }
}

imagem do console depois de eu aperta várias vezes o incluir:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá Vítor, tudo bem com você?

Peço desculpas pela demora em lhe responder.

A não adição de novas negociações ao array pode estar relacionado com o comportamento padrão do formulário HTML, onde, quando clicamos no botão do tipo submit (botão incluir) o formulário é enviado e a página é recarregada. Analisando o código enviado, este comportamento não foi cancelado.

No código será necessário adicionar o atributo event no método adicionar da classe NegociaçãoController presente no arquivo NegociacaoController.js. Usaremos o atributo event para impedir o comportamento padrão do formulário, usando a função preventDefault().

O método adicionar deve ser declarado como apresentado abaixo.

adicionar(event) {
    event.preventDefault();
    this.#listaNegociações.adiciona(this.#criandoNegociação())        
    console.log(this.#listaNegociações.negociações)
    this.#limparFormulários()
}

No arquivo index.html, localize a tag form, verifique se o seu atributo está sendo declarado como apresentado abaixo.

<form class="form" onsubmit="NegociaçãoController.adicionar(event)">

Após as mudanças descritas acima, salve os arquivos NegociacaoController.js e index.html.

Abra o arquivo index.html no navegador e adicione duas novas negociações. No painel de desenvolvedor do navegador (pressione ) verifique o número de itens no array.

O código enviado foi testado em conjunto com o código da aula, caso o projeto continue não adicionando novos itens ao array, peço que compartilhe seu projeto completo, para que eu possa realizar novos testes e simulações.

Para compartilhar seu projeto, basta enviar a pasta compactada do projeto para um site de compartilhamento (exemplo: Google Drive) e enviar o link de compartilhamento na resposta desta postagem.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Espero ter lhe ajudado. Em caso de dúvidas estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em programação