Fiz o passo a passo com o professor e deu certo, porém após a aula tentei fazer novamente para fixar o conteúdo e acabou por dar um erro inesperado. Não consigo localizar o problema! No navegador surge o seguinte problema:script.js:13 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLButtonElement.criarTarefa (script.js:13) Já vi em todos os locais e comparei com o código do professor, tudo "igual".
Poderiam me dar um help?
Meu código HTML:
<body>
<div class="total">
<div class="total__list">
<h1 class="total__titulo">Ceep</h1>
<form class="total__form form">
<input type="text" class="form__texto" data-form-input>
<button class="form__botao" data-form-button> Novo item </button>
</form>
<ol class="form__lista lista">
<!-- <li class="lista__item">Olá mundo</li> -->
</ol>
</div>
</div>
<script src="script.js"></script>
</body>Meu código JS :
const criarTarefa = (evento) => {
evento.preventDefault();
const lista = document.querySelector('.lista');
const input = document.querySelector('.form__texto');
const valor = input.value;
let tarefa = document.createElement('li');
tarefa.classList.add('lista__item');
const conteudo = `<p class = "content">${valor}</p>`;
tarefa.innerHTML = conteudo;
tarefa.appendChild(BotaoConclui());
tarefa.appendChild(BotaoDeleta());
lista.appendChild(tarefa);
input.value = "";
};
const novaTarefa = window.document.querySelector('.form__botao');
novaTarefa.addEventListener('click', criarTarefa);
const BotaoConclui = () => {
const botaoConclui = document.createElement('button');
botaoConclui.classList.add('form__button');
botaoConclui.innerText = 'Concluir';
botaoConclui.addEventListener('click', concluirTarefa);
return BotaoConclui;
};
const concluirTarefa = (evento) => {
const botaoConclui = evento.target;
const tarefaCompleta = botaoConclui.parentElement;
tarefaCompleta.classList.toggle('done');
};
const BotaoDeleta = () => {
const botaoDeleta = document.createElement('button');
botaoDeleta.innerText = 'Deletar';
botaoDeleta.addEventListener('click', deletarTarefa);
return BotaoDeleta;
};
const deletarTarefa = (evento) => {
const botaoDeleta = evento.target;
const tarefaCompleta = botaoDeleta.parentElement;
tarefaCompleta.remove();
return botaoDeleta;
};
