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

Mensagem de erro: Uncaught ReferenceError: negociacaoController is not defined

Galera estou tendo um problema com esse erro. Alguém sabe me ajudar com isso? Segue os meus códigos.

--- HTML ---

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body class="container">
    <h1 class="text-center">Negociações</h1>
    <form class="form" onsubmit="negociacaoController.adiciona(event)">
        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>        
        </div>
        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>
        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>
        <button class="btn btn-primary" data-js="btnSubmit" 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>DATA</th>
                <th>QUANTIDADE</th>
                <th>VALOR</th>
                <th>VOLUME</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
    <script src="js/app/models/Negociacao.js"></script>
    <script src="js/app/controllers/NegociacaoController.js"></script>
</body>
</html>

--- NegociacaoController.js ---

class NegociacaoController {

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

        this._inputData = $('#data');
        this._inputQtd = $('#quantidade');
        this._inputValor = $('#valor');
    }

    adiciona(event){
        event.preventDefault();

        let negociacao = new Negociacao(
            this._inputData.value,
            this._inputQtd.value,
            this._inputValor.value
        );

        console.log(negociacao);
    };
}

--- Negociacao.js ---

class Negociacao {

    constructor(data, quantidade, valor) {

        this._data = new Date(data.getTime());
        this._quantidade = quantidade;
        this._valor = valor;
        Object.freeze(this);
    }

    get volume() {

        return this._quantidade * this._valor;
    }

    get data() {
        return new Date(this._data.getTime());
    }

    get quantidade() {
        return this._quantidade;
    }

    get valor() {
        return this._valor;
    }
}

Espero que alguém possa me ajudar. Pois realmente não sei como resolver.

6 respostas
solução!

Em nenhum momento no seu código você cria uma instância de NegociacaoController, por isso a mensagem muito corretamente e pontualmente indica o problema.

Você não pode usar a instância de uma classe sem instancia-la.

Você terminou o curso antes de criar um projeto tentando utilizar os conhecimentos adquiridos? Digo isso porque criar instâncias é uma das primeiras coisas que ensino no curso. Talvez seja uma boa revisar. Tem uns atributos diferentes no seu html como " data-js="btnSubmit" que não uso.

Eu não terminei o curso ainda. E de fato não criei a instância.

Em relação o data-js="btnSubmit" foi adicionado para testar o document.querySelector e ver quais tipos de atribuições eu poderia dar a ele. E vi que posso pegar tanto pelos seletores CSS como por atributos criado no meu HTML.

Vou reiniciar o curso e fazer com mais atenção. Obrigado pela resposta.

Flávio, ficou outra dúvida no ar. Já que estou chamando a negociacaoController dentro do HTML. Eu posso fazer a instância dela dentro dela mesmo? Ou seja, dentro do meu código NegociacaoController.js ao terminar a classe criar a instância?

Não faz sentido fazer isso, apesar de funcionar. Você está misturando instância e classe no mesmo lugar. Por que não faz como eu faço no curso ? Por que não quer fazer dessa forma ?

Eu fiz como nas aulas e deixei no index.html... Mas acho importante testar para poder compreender o que está acontecendo. Não por rebeldia, nem por teimosia, mas só por curiosidade e ver o que o JS pode fazer e como ele faz. Por isso depois das aulas eu gosto de testar o que foi passado para fixar o que visto em aula.

Justo. Experimentar e ser curioso são características de um bom programador. Entendi.