Uncaught Typeerror: Cannot set Property 'innerHTML' of null

Asked

Viewed 968 times

2

The code snippet below is giving error because _element is returning null some idea of 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>

javascript
  • 2

    Post the code where you try to use the method update.

  • 1

    Put the code in which you create a new View. And the HTML code that goes with it. If it is not an error in the selector, it may be that the element does not yet exist at the time you run this code.

  • actually the views I created inherit this view class

  • I believe everything you need to help me is here

  • I believe I found the rsrsrs and ta error in html

1 answer

1

Actually in my code the original #messageView was being called as . messageView so it didn’t 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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.