Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Imprimi [object HTMLInputElement]

Referente ao curso JavaScript: conhecendo o Browser e padrões de projeto

por Felipe Machado Da Silva
| 59.5k xp | 35 posts

Boa noite,estou refazendo o projeto com uma modificação ao invés de data(date ) tenho um nome (text/String),porém ao gerar a tabela só o primeiro elemento é montado corretamente que é o nome,sendo assim as demais montadas com um dado incoerente [object HTMLInputElement]

Código que possivelmente está com erro,eu analisei e não encontrei o "danado"

View

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

    template() {
        throw new Error("O metodo template deve ser implementado");
    }


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

ProdutoView

class ProdutoView extends View {
    constructor(elemento) {
        super(elemento);
    }
    template(model) {
            return `
<table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>NOME</th>
                <th>QUANTIDADE</th>
                <th>VALOR</th>
            </tr>
        </thead>

        <tbody>
            ${model.produtos.map(p => `

        <tr> 
            <td>${p.nome}</td>
            <td>${p.quantidade}</td>
            <td>${p.valor}</td>

        </tr>
        `)}
        </tbody>

        <tfoot>
        </tfoot>
    </table>

`;
    }


}

produtoController

class ProdutoController {
    constructor() {
            // VALORES EXTRAIDOS DOS FORMULARIOS
            let $ = document.querySelector.bind(document);
            this._inputNome = $('#nome');
            this._inputQuantidade = $('#quantidade');
            this._inputValor = $('#valor');
            //INSTANCIAR A LISTA
            this._listaProdutos = new ListaProdutos();
            //INSTANCIAR A VIEWS
            this._produtoView = new ProdutoView($('#produtoView'));
            this._produtoView.update(this._listaProdutos);
        }
        //EVENTOS
    adicionar(event) {
        event.preventDefault();
        this._listaProdutos.adiciona(this._criaProduto());
        this._produtoView.update(this._listaProdutos);
        this._limparFormulario();

    }

    _criaProduto() {
        return new Produto(this._inputNome.value, this._inputQuantidade.value, this._inputValor.value);
    }
    _limparFormulario() {
        this._inputNome.value = '';
        this._inputQuantidade.value = 1;
        this._inputValor.value = 0;
        this._inputNome.focus();
    }

}

IMPRESSÃO COM ERRO

NOME QUANTIDADE VALOR talco [object HTMLInputElement] [object HTMLInputElement]

4 respostas
por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team Desenvolvedor e Instrutor

Oi Felipe,

Ví uma coisa estranha, mas vc precisa testar aí pra ver se é só isso mesmo.

Lá em produtoController, no método _limparFormulario vc está fazendo isso:

        this._inputQuantidade = 1;
        this._inputValor = 0;
`

Como as duas propriedades são InputElements do DOM, vc provavelmente quer mudar a propriedade value delas.

O código ficaria assim:

        this._inputQuantidade.value = 1;
        this._inputValor.value = 0;
`

Como você chama _limparFormulario lá no método adicionar, é possível que a primeira adição funcione, mas a segunda já não.

Diga depois se era isso mesmo ou não. Qualquer coisa estamos aí

por Felipe Machado Da Silva
| 59.5k xp | 35 posts

Olá,realmente me esqueci do .value nos outros elementos mas o erro persiste. : /

solução!
por Felipe Machado Da Silva
| 59.5k xp | 35 posts

Bem,eu resolvi o problema,entretanto eu causei outro problema , coloquei .value na quantidade e valor,sumiu aquele nome estranho,porém os valores se replicam 3 5 isso 3 5 talco 3 5 

class ProdutoView extends View {
    constructor(elemento) {
        super(elemento);
    }
    template(model) {
            return `
<table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>NOME</th>
                <th>QUANTIDADE</th>
                <th>VALOR</th>
            </tr>
        </thead>

        <tbody>
            ${model.produtos.map(p => `

        <tr> 
            <td>${p.nome}</td>
            <td>${p.quantidade.value}</td>
            <td>${p.valor.value}</td>

        </tr>
        `)}
        </tbody>

        <tfoot>
        </tfoot>
    </table>

`;
    }


}
por Felipe Machado Da Silva
| 59.5k xp | 35 posts

Resolvido,meu model estava fazendo uma atribuição desnecessária

class Produto {
    constructor(nome, quantidade, valor) {
        this._nome = nome;
        this._quantidade = quantidade;
        this._valor = valor;

    }
    get nome() {
        return this._nome;

    }
    get quantidade() {
        return this._quantidade;
    }

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