Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
no console esta aparecendo o seguinte erro:
Uncaught TypeError: Cannot read property 'adiciona' of undefined
at NegociacaoController.adiciona (NegociacaoController.js:18)
at HTMLFormElement.onsubmit (index.html:14)E não esta adicionando a negociacao dinamicamente na tabela
Fala Fábio, tudo certo, xará? =D
Você poderia postar o seu código aqui para que possamos dar uma olhada no erro? Aparentemente, você está tentando acessar a propriedade adiciona de um undefined, ou seja, você está referenciando um elemento indefinido aí... =|
Fábio
XD gostaria de ver o index.html certo?!
<!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" 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>
<div id="negociacoesView"></div>
<script src="js/app/models/Negociacao.js"></script>
<script src="js/app/controllers/NegociacaoController.js"></script>
<script src="js/app/helpers/DateHelper.js"></script>
<script src="js/app/models/ListaNegociacoes.js"></script>
<script src="js/app/views/NegociacoesView.js"></script>
<script>
let negociacaoController = new NegociacaoController();
</script>
</body>
</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" 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>
<div id="negociacoesView"></div>
<script src="js/app/models/Negociacao.js"></script>
<script src="js/app/controllers/NegociacaoController.js"></script>
<script src="js/app/helpers/DateHelper.js"></script>
<script src="js/app/models/ListaNegociacoes.js"></script>
<script src="js/app/views/NegociacoesView.js"></script>
<script>
let negociacaoController = new NegociacaoController();
</script>
</body>
</html>
Opa, isso, mesmo...
Falha minha, desculpe. Rs... Mas, além do index.html, você poderia colocar o código do seu NegociacaoController.js, por favor? =D
Fábio
não sei usar o fórum corretamente, não sei se da para você analisar meu código assim :s se nao der envio novamente de outra maneira
class NegociacaoController {
constructor(){
let $ = document.querySelector.bind(document);
this._inputData = $('#data');
this._inputQuantidade = $('#quantidade');
this._inputValor = $('#valor');
this._listaNegociacoes = new ListaNegociacoes();
this._negociacoesView = new NegociacoesView($('#negociacoesView'));
this._negociacoesView.update(this._listaNegociacoes);
}
adiciona(event){
event.preventDefault();
this.listaNegociacoes.adiciona(this._criaNegociacao());
this._negociacoesView.update(this._listaNegociacoes);
this._limpaFormulario();
}
_criaNegociacao(){
return new Negociacao(
DateHelper.textoParaData(this._inputData.value),
this._inputQuantidade.value,
this._inputValor.value);
}
_limpaFormulario() {
this._imputData.value = '';
this._inputQuantidade.value = 1;
this._inputValor = 0;
this._inputData.focus();
}
}obrigado pela atenção amigo!
class NegociacaoController {
constructor(){
let $ = document.querySelector.bind(document);
this._inputData = $('#data');
this._inputQuantidade = $('#quantidade');
this._inputValor = $('#valor');
this._listaNegociacoes = new ListaNegociacoes();
this._negociacoesView = new NegociacoesView($('#negociacoesView'));
this._negociacoesView.update(this._listaNegociacoes);
}
adiciona(event){
event.preventDefault();
this.listaNegociacoes.adiciona(this._criaNegociacao());
this._negociacoesView.update(this._listaNegociacoes);
this._limpaFormulario();
}
_criaNegociacao(){
return new Negociacao(
DateHelper.textoParaData(this._inputData.value),
this._inputQuantidade.value,
this._inputValor.value);
}
_limpaFormulario() {
this._imputData.value = '';
this._inputQuantidade.value = 1;
this._inputValor = 0;
this._inputData.focus();
}
}
Opa... Eu vi o que tinha acontecido... Rs.
Quando você for inserir um código, procure pelo botão <> Inserir código, que fica bem acima da caixa de texto. Dessa forma seu código fica formatado corretamente. =)
Se preferir, pode utilizar também três crazes, assim:
```
Aqui no meio você coloca o seu código, para aparecer formatado certinho. =D
```
Fábio
class NegociacaoController {
constructor(){
let $ = document.querySelector.bind(document);
this._inputData = $('#data');
this._inputQuantidade = $('#quantidade');
this._inputValor = $('#valor');
this._listaNegociacoes = new ListaNegociacoes();
this._negociacoesView = new NegociacoesView($('#negociacoesView'));
this._negociacoesView.update(this._listaNegociacoes);
}
adiciona(event){
event.preventDefault();
this.listaNegociacoes.adiciona(this._criaNegociacao());
this._negociacoesView.update(this._listaNegociacoes);
this._limpaFormulario();
}
_criaNegociacao(){
return new Negociacao(
DateHelper.textoParaData(this._inputData.value),
this._inputQuantidade.value,
this._inputValor.value);
}
_limpaFormulario() {
this._imputData.value = '';
this._inputQuantidade.value = 1;
this._inputValor = 0;
this._inputData.focus();
}
}obrigado Fabio.. KKKK
desculpa toda essa complicação :(
Boa noite. O problema está aqui
adiciona(event){
event.preventDefault();
this.listaNegociacoes.adiciona(this._criaNegociacao());
this._negociacoesView.update(this._listaNegociacoes);
this._limpaFormulario();
}
`A mensagem de erro apontou exatamente o local.
Você está fazendo
this.listaNegociacoes.adiciona(this._criaNegociacao());O correto é this._listaNegociacoes
Sucesso e bom estudo meu aluno.