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

Erro na propriedade 'innerHTML' of null: at MensagemView.update

class View{
  constructor(elemento){
    this._elemento = elemento;
  }

  template(){
    throw new Error("O método template deve ser implementado");
  }

  update(model){
    this._elemento.innerHTML = this.template(model);
  }
}
class MensagemView extends View{

  constructor(elemento){
    super(elemento);
  }

  template(model){
    return model.texto ? `<p class="alert alert-info">${model.texto}</p>` : `<p></p>`;
  }

}
class View{
  constructor(elemento){
    this._elemento = elemento;
  }

  template(){
    throw new Error("O método template deve ser implementado");
  }

  update(model){
    this._elemento.innerHTML = this.template(model);
  }
}
3 respostas
solução!

Olá João Victor, tudo bem com você?

Nesses dois códigos que você postou está tudo normal, acredito que o problema esteja dentro do NegociacaoController ou no Mensagem.js, você poderia postar aqui para que a gente possar dar uma olhada ?

Provavelmente o problema esteja aqui, em nosso Negociação Controller:

this._mensagem = new Mensagem();
this._mensagemView = new MensagemView($('#mensagemView'));
this._mensagemView.update(this._mensagem)

Que o valor passado para o mensagemView esteja algo incorreto, pode dar um checada?

Qualquer coisa estou a disposição!

Abraços e Bons Estudos :)

Muito Obrigado Geovani Granieri . O erro estava na View: não coloquei o _ no this._elemento, e o outro erro era também o # do id lá no NegociacaoController.js

class NegociacaoController {


  constructor() {

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

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

    this._listaNegociacoes = new ListaNegociacoes(model => this._negociacoesView.update(model));


    this._negociacoesView = new NegociacoesView($('#negociacoesViews'));
    this._negociacoesView.update(this._listaNegociacoes);

    this._mensagem = new Mensagem();
    this._mensagemView = new MensagemView($('#mensagemView'));
    this._mensagemView.update(this._mensagem);
  }

  adiciona(event) {

    event.preventDefault();
    this._listaNegociacoes.adiciona(this._criaNegociacao());

    this._mensagem.texto = 'Negociação adionada com sucesso';
    this._mensagemView.update(this._mensagem);

    this._limpaFormulario();
  }

  apaga() {
    this._listaNegociacoes.esvazia();

    this._mensagem.texto = "Negociações apagadas com sucesso";
    this._mensagemView.update(this._mensagem);
  }
  _criaNegociacao() {
    return new Negociacao(
      DateHelper.textoParaData(this._inputData.value),
      this._inputQuantidade.value,
      this._inputValor.value
    );
  }

  _limpaFormulario() {
    this._inputData.value = '';
    this._inputQuantidade.value = 1;
    this._inputValor.value = 0.0

    this._inputData.focus();

  }
}
class MensagemView extends View{

  constructor(elemento){
    super(elemento);
  }

  template(model){
    return model.texto ? `<p class="alert alert-info">${model.texto}</p>` : `<p></p>`;
  }

}
class View{
  constructor(elemento){
    this._elemento = elemento;
  }

  template(){
    throw new Error("O método template deve ser implementado");
  }

  update(model){
    this._elemento.innerHTML = this.template(model);
  }
}

Olá João,

Você marcou como solucionada intencionalmente?

Caso não, o erro estava por ter esquecido de colocar o símbolo de # para capturarmos corretamente o id com o document.querySelector:

new MensagemView($('mensagemView'));

No caso teríamos que utilizar o #mensagemView!

Caso marcou intencionalmente fico feliz que tenha te auxiliado :)

Abraços!