innerHTML | TypeScript parte 1: evoluindo seu JavaScript | Alura

3
respostas

por Bruno Folharini

| 57.9k xp | 5 posts

Bom dia.

Estou na Aula 3 - 04 (Apresentando Modelo para o usuário)

Realizei o passo a passo que foi feito em todas as aulas e agora estou preso nesta parte, estou tendo problemas, na hora em que vou no navegador por o (view = new NegociacoesView('#negociacoesview');) e dou enter ele já me retorna como (NegociacoesView {_elemento: null}) no exemplo mostrado pelo professor o elemento tem retorno valido não sendo o "null" que eu estou tendo. (estou usando o Chrome)

Se eu der continuidade ele der o proximo comando que é view.update()+Enter

ele me apresenta o seguinte erro ((NegociacoesView.js:6 Uncaught TypeError: Cannot set property 'innerHTML' of null at NegociacoesView.update (NegociacoesView.js:6) at :1:6))

informando que a proriedade innerHTML é null

tentei pegar o download da aula para seguir e depois tentar novamente rever meu código, porém nem isso ajudou uma vez que ao realizar os testes de incluir os dados digitados na negociação ele não está gravando.

class NegociacoesView {

    private _elemento: Element;

    constructor(seletor: string) {

        this._elemento = document.querySelector(seletor);
    }

    update(): void {

        this._elemento.innerHTML = this.template();
    }

    template(): string {

        return `
        <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>               
        `
    }
}

Já não sei mais onde posso estar errando. Fico no aguardo de uma ajuda e agradeço a atenção desde já. Obrigado

3 respostas

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

04/06/2019

Fala ai Bruno, tudo bem? Você atribuiu o id igual á negociacoesview para algum elemento na sua página (index.html)?

Me manda o código HTML do seu projeto.

Espero ter ajudado, bons estudos.

por Bruno Folharini

| 57.9k xp | 5 posts

05/06/2019

Boa noite,

O meu código é o que já havia sido criado ao postar o material do curso. Estou apenas acrescentando o que o professor vai dando na sequencia.

<!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>

    <div id="mensagemView"></div>

    <form class="form">

        <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>

    <br>
    <br>

    <div id="negociacoesView"></div>

    <script src="js/models/Negociacao.js"></script>
    <script src="js/controllers/NegociacaoController.js"></script>
    <script src="js/models/Negociacoes.js"></script>
    <script src="js/views/NegociacoesView.js"></script>
    <script src="js/app.js"></script>

</body>
</html>

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

05/06/2019

O erro está no seu seletor Bruno, repare no id da sua div:

<div id="negociacoesView"></div>

Agora, vamos olhar o seu seletor:

view = new NegociacoesView('#negociacoesview')

O seu view deveria ser com a V maiusculo, dessa maneira ele não vai encontrar um elemento com esse id e seu elemento ficará null, tente mudar para:

view = new NegociacoesView('#negociacoesView')

Deve resolver o problema.

Espero ter ajudado.