Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

ListaNegociacoes is not defined

Referente ao curso JavaScript: conhecendo o Browser e padrões de projeto, no capítulo Lidar com data é trabalhoso? Chame um ajudante! e atividade Criando nosso ListModel

por Valmyr Tavares Malta de Lima
| 94.9k xp | 59 posts
dono

Eu instanciei a ListaNegociacao dentro do NegociacaoController.js olhei a sintax e todas as vezes que tento rodar ele diz que ListaNegociacao não está definida. O que é um erro comum e simples de resolver, acompanhei a transcrição da aula, mas não consigo achar o erro. Vou mandar os 3 códigos envolvidos. ListaNegociacao.js NegociacaoController.js e o meu HTML que está com outro nome Principal.html. Nessa ordem

class ListaNegociacoes { constructor(){ this.negociacoes = [] } adiciona(negociacao){ this.negociacoes.push(negociacao); } get negociacoes(){ return this._negociacoes; } };

class NegociacaoController{ constructor(){ let $ = document.querySelector.bind(document);

    this._inputData = $("#data");
    this._inputQuantidade = $("#quantidade");
    this._inputValor = $("#valor");
    this._listaNegociacoes = new ListaNegociacoes;

}
adiciona(event){
    event.preventDefault();








 let negociacao = new Negociacao(
    DateHelper.textoParaData(this._inputData.value),
     //this._inputData.value,
     this._inputQuantidade.value,
     this._inputValor.value

    );

    this._listaNegociacoes.adiciona(negociacao);
    this._limpaFormulario();

    console.log(this._listaNegociacoes.negociacoes);



}
_limpaFormulario(){
    this._inputData.value = "";
    this._inputQuantidade.value = 1;
    this._inputValor = 0;

    this._inputData.focus();
}

}

Negociações

DATA 
    <div class="grupo">
        <Label for="quantidade">Quantidade</Label>
        <input type="number" step="1" min="1" id="quantidade" value="1" required > 
    </div>

    <div class="grupo">
        <Label for="valor">Valor</Label>
        <input type="number" id="valor" min="0" value="0" required > 
    </div>
     <button class="btn" type="submit">Incluir</button>

  </form>

  <table class="tabela">
      <thead>
          <tr>
              <th>DATA</th>
              <th>Quantidade</th>
              <th>Valor</th>
              <th>Volume</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script src="js/app/models/Negociacao.js"></script>
    <!-- <script>
          var hoje = new Date();

var n1 = new Negociacao(hoje, 5, 700);

console.log(n1.data);

hoje.setDate(11);

console.log(n1.data); -->

9 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

No html está faltando a tag

com seus parametros dentro.
por Gabriel Leite
| 3484k xp | 5398 posts
Instrutor

Boa tarde, Valmyr! Como vai?

Repare que na classe ListaNegociacoes o construtor está assim:

constructor(){ this.negociacoes = [] }

Mas o correto seria fazer:

constructor(){ this._negociacoes = [] }

Do jeito que vc fez, vc criou um atributo na sua classe chamado negociacoes. E depois no getter negociacoes() vc retorna um atributo chamado _negociacoes que não existe. Por isso vc está tendo esse problema.

Faça a correção aí e verifique se o código funciona da maneira esperada! Qualquer coisa é só falar!

Obs.: Sempre que for postar um código, utilize o botão "inserir código" e cole o código no lugar indicado para que ele saia com a formatação correta e facilite na hora de avaliá-lo!

Grande abraço e bons estudos, meu aluno!

por Valmyr Tavares Malta de Lima
| 94.9k xp | 59 posts
dono

Boa noite Gabriel.

Não sei porque a copia do código foi errada, dei um ctrl c ctrl v e foi faltando o underline que na verdade já estava ai. Estou mandando novamente para conferir.

class ListaNegociacoes {
    constructor(){
        this._negociacoes = []
    }
    adiciona(negociacao){
        this._negociacoes.push(negociacao);
    }
    get negociacoes(){
        return this._negociacoes;
    }
};

Quanto ao código do HTML, também foi faltando partes e eu não percebi a tag com o link está presente também, vou copiá-lo novamente aqui com mais cuidado.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>JsmodernoTeste</title>
</head>
<body>
    <h1>Negociações</h1>
    <form class="form" onsubmit="negociacaoController.adiciona(event)">
        <div class="grupo">
          <Label for="data">DATA</Label>
          <input type="date" id="data" required autofocus> 
        </div>

        <div class="grupo">
            <Label for="quantidade">Quantidade</Label>
            <input type="number" step="1" min="1" id="quantidade" value="1" required > 
        </div>

        <div class="grupo">
            <Label for="valor">Valor</Label>
            <input type="number" id="valor" min="0" value="0" required > 
        </div>
         <button class="btn" type="submit">Incluir</button>

      </form>

      <table class="tabela">
          <thead>
              <tr>
                  <th>DATA</th>
                  <th>Quantidade</th>
                  <th>Valor</th>
                  <th>Volume</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script src="js/app/models/Negociacao.js"></script>
        <!-- <script>
              var hoje = new Date();

var n1 = new Negociacao(hoje, 5, 700);

console.log(n1.data);

hoje.setDate(11);

console.log(n1.data);
</script> -->
<script src="js/app/controller/NegociacaoController.js"></script>
<script>
    let negociacaoController = new NegociacaoController();
</script>
 <script src="js/app/helpers/DateHelper.js"></script>
 <script src="js/app/models/ListaNegociacoes.js"></script>
</body>
</html>

E quanto ao NegociacaoController aqui vai de novo.

class NegociacaoController{
    constructor(){
        let $ = document.querySelector.bind(document);

        this._inputData = $("#data");
        this._inputQuantidade = $("#quantidade");
        this._inputValor = $("#valor");
        this._listaNegociacoes = new ListaNegociacoes;

    }
    adiciona(event){
        event.preventDefault();

        let negociacao = new Negociacao(
           DateHelper.textoParaData(this._inputData.value),
            //this._inputData.value,
            this._inputQuantidade.value,
            this._inputValor.value

           );

           this._listaNegociacoes.adiciona(negociacao);
           this._limpaFormulario();

           console.log(this._listaNegociacoes.negociacoes);



       }
       _limpaFormulario(){
           this._inputData.value = "";
           this._inputQuantidade.value = 1;
           this._inputValor = 0;

           this._inputData.focus();
       }
   }

Desculpe o desmazelo e muito obrigado pela atenção

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Coloquei o código aqui https://codepen.io/anon/pen/GwJmdG pra gente ver com mais calma.

O erro que dá é ReferenceError: NegociacaoController is not defined

Mas ainda não consegui ver o erro. E parece que está bem debaixo do meu nariz hehehehe.

por Felipe Nascimento
| 481k xp | 657 posts
Instrutor

Oi André,

Pelo que eu vi aqui pode ser o () que está faltando quando você instanciou o atributo ListaNegociacoes

this._listaNegociacoes = new ListaNegociacoes();
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Isso é verdade Felipe. Valeu. Mas não estou vendo onde está o codigo que adciona o conteúdo na tabela. Vontade de colocar um $(".tabela").append("codigo de inserção") kkkkk

por Valmyr Tavares Malta de Lima
| 94.9k xp | 59 posts
dono

Eu acrescentei o () no new ListaNegociacoes(); e ele começou a dar um outro erro, que é negociacaoController is not defined. E aponta a linha do principal.html em que está o onsubmit do form.

por Valmyr Tavares Malta de Lima
| 94.9k xp | 59 posts
dono

Consegui solucionar. No arquivo principal.html eu troquei a ordem. Pus o script que instancia NegociacaoController. Embaixo dos scripts que chamam o DataHelper e a ListaNegociacoes e ai funcionou. O código ficou assim

<script src="js/app/models/Negociacao.js"></script>
    <script src="js/app/controller/NegociacaoController.js"></script>
    <script src="js/app/helpers/DateHelper.js"></script>
    <script src="js/app/models/ListaNegociacoes.js"></script>
    <script>
        let negociacaoController = new NegociacaoController();
    </script>

Gostaria de saber só o motivo para que isso aconteça, pois essa questão não é comentada dentro da aula.

solução!
por Felipe Nascimento
| 481k xp | 657 posts
Instrutor

Legal Valmyr,

A leitura do HTML acontece de cima para baixo, então a ordem dos scripts importa sim.

Foi por isso que apareceu o erro de negociacaoController is not defined.

Porque instanciamosNegociaçãoController() antes do HTML ler os scriptsListaNegociacoes.js e DateHelper.js

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software