Entrar Ainda não tem acesso?
1
resposta

[Dúvida] uncaught ReferenceError: add is not defined

por João Victor Dantas Sales
| 110k xp | 10 posts

Estou tentando criar uma aplicação de tarefas, todavia, sempre que testo como está o funcionamento até agora recebo este erro que está no titulo do tópico, e quando mudo algo para ver se funciona, o console sequer dá sinal de vida, deixarei abaixo o código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>
</head>
<body>

    <header>
        <img src="./img/notepad.png" alt="notepadlogo">
        <h2>MyNotepad</h2>
    </header>

    <main>

        <section class="tasks">

            <div id="tododiv">

            </div>
            <hr>
            <div id="done">

            </div>

        </section>
        <hr>
        <input type="text" id="adition">
        <button type="submit" id="addbtn">add new task</button>

    </main>

</body>
</html>
var insertNewTask = document.querySelector('#adition');
var addButton = document.querySelector('#addbtn');

var toDo = [];
var done = [];
var i = 0;

addButton.addEventListener('click', function(){
    var newTask = insertNewTask;
    toDo[i] = newTask;
    alert(toDo[i]);
});
1 resposta
por Rafaela Petelin Silvério
| 103.6k xp | 127 posts

Oi João, tudo bem com você?

Rodei seu código por aqui e parece que o var addButton = document.querySelector('#addbtn'); está sendo executado antes mesmo do DOM carregar completamente, isso faz com que addButton fique indefinido. Uma solução é colocar seu código dentro de um window.onload=function(){}, que só vai permitir que ele execute quando o carregamento for completo. Além disso, adicionei o var insertNewTask = document.querySelector('#adition').value; dentro da função para que o valor no campo seja buscado só após o clique. Caso contrário, haveria erro no console ao carregar a página pois o valor no campo estaria vazio. Ficou assim:

window.onload=function(){

var addButton = document.querySelector('#addbtn');

var toDo = [];
var done = [];
var i = 0;

    addButton.addEventListener('click', function(){
        var insertNewTask = document.querySelector('#adition').value;
        var newTask = insertNewTask;
        toDo[i] = newTask;
        alert(toDo[i]);
    });
}

Espero ter resolvido sua questão.

Caso ainda tenha alguma dúvida, me coloco à disposição!

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!