Uncaught TypeError: Can not set property 'innerHTML' of null

1

The code snippet below is giving error because _element is returning null any idea how to solve?

class View {

    constructor(seletor) {

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

    update(model) {

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

    template(model) {

        throw new Error('Você precisa implementar o método template');
    }
}  

class NegociacoesView extends View {

    template(model) {

        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>
                ${model.paraArray().map(negociacao =>
                '
                    <tr>
                        <td>${DateConverter.paraTexto(negociacao.data)}</td>
                        <td>${negociacao.quantidade}</td>
                        <td>${negociacao.valor}</td>
                        <td>${negociacao.volume}</td>
                    </tr>                        
                ').join('')}
            </tbody>
            
            <tfoot>
                <tr>
                    <td colspan="3"></td>
                    <td>${model.volumeTotal}</td>            
                </tr>
            </tfoot>
            
        </table>               
        '
    }
}

class MensagemView extends View {

    template(model) {

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">    
    <title>Negociações</title>    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    

</head>

<body class="container">

    <h1 class="text-center">Negociações</h1>

    <div class="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>

    <div class="text-center">
        <button id="botao-importa" class="btn btn-primary text-center" type="button">
            Importar Negociações
        </button>
        <button id="botao-apaga" class="btn btn-primary text-center" type="button">
            Apagar
        </button>
    </div>
    <br>
    <br>
    
    <div id="negociacoes"></div> 
    <script src="app/domain/negociacao/Negociacao.js"></script>
    <script src="app/controllers/NegociacaoController.js"></script>
    <script src="app/ui/converters/DateConverter.js"></script>
    <script src="app/domain/negociacao/Negociacoes.js"></script>
    <script src="app/ui/views/View.js"></script>
    <script src="app/ui/views/NegociacoesView.js"></script> 
    <script src="app/ui/models/Mensagem.js"></script>
    <script src="app/ui/views/MensagemView.js"></script>
    <script src="app/app.js"></script>
</body>

</html>
    
asked by anonymous 12.09.2017 / 04:02

1 answer

0

In fact in my code the original #messageView was being called as .messageView so it did not work

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">    
    <title>Negociações</title>    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>

    <div class="text-center">
        <button id="botao-importa" class="btn btn-primary text-center" type="button">
            Importar Negociações
        </button>
        <button id="botao-apaga" class="btn btn-primary text-center" type="button">
            Apagar
        </button>
    </div>
    <br>
    <br>
    
    <div id="negociacoes"></div> 
    <script src="app/domain/negociacao/Negociacao.js"></script>
    <script src="app/controllers/NegociacaoController.js"></script>
    <script src="app/ui/converters/DateConverter.js"></script>
    <script src="app/domain/negociacao/Negociacoes.js"></script>
    <script src="app/ui/views/View.js"></script>
    <script src="app/ui/views/NegociacoesView.js"></script> 
    <script src="app/ui/models/Mensagem.js"></script>
    <script src="app/ui/views/MensagemView.js"></script>
    <script src="app/app.js"></script>
</body>

</html>
    
13.09.2017 / 14:52