3
respostas

Meu código está correto. Porém quando abro no navegador não funciona.

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist. (index):1 Error handling response: TypeError: Cannot destructure property 'yt' of 'undefined' as it is undefined. at chrome-extension://cmedhionkhpnakcndndgjdbohmhepckk/scripts/contentscript.js:513:6 (index):56 Live reload enabled. 4main.js:18 Uncaught ReferenceError: botaoConclui is not defined at HTMLButtonElement.criarTarefa (main.js:18) DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:5500/1823_DOM-projeto_incial/projeto_inicial/assets/css/style.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

3 respostas

Oi Luan, tudo bem? Aparentemente temos um erro no seu código na linha 18, onde o botaoConclui não está definido em HTMLButtonElement.criarTarefa, você poderia mandar o seu código aqui para eu te ajudar a resolver esse problema? Tanto o HTML quanto o Javascript, por favor!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=BioRhyme&amp;family=Space+Mono&amp;display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title></title>
</head>
<body>
  <div class="app">
    <div class="todo-list">
      <h1 class="title">
        Escolha sua(s) fruta(s):
      </h1>

      <form class="form" action="">
        <input class="form-input" type="text" data-form-input>
        <button class="form-button" data-form-button> Novo Item </button>
      </form>

      <ul class="list" data-list>

      </ul>
    </div>
    <script type="module" src="main.js"></script>
</body>
</html>
import botaoConcluir from './componentes/concluirTarefa.js'
import BotaoDeleta from './componentes/deleta.js'

    const criarTarefa = (evento) => {

    evento.preventDefault()

    const lista = document.querySelector('[data-list]')
    const input = document.querySelector('[data-form-input]')
    const valor = input.value

    const tarefa = document.createElement('li')
    tarefa.classList.add('task')
    const conteudo = `<p class="content">${valor}</p>`

    tarefa.innerHTML = conteudo

    tarefa.appendChild(botaoConclui())
    tarefa.appendChild(BotaoDeleta())
    lista.appendChild(tarefa)
    input.value = " "

}

const novaTarefa = document.querySelector('[data-form-button]')

novaTarefa.addEventListener('click', criarTarefa)

const BotaoConclui = () => { const botaoConclui = document.createElement('button')

botaoConclui.classList.add('check-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')

}

export default BotaoConclui

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

}

export default BotaoDeleta

Luan, no seu arquivo main.js você está importando o botaoConcluir, mas no código você usa o botaoConclui, há um erro de digitação. Tente importar da seguinte forma e veja se funciona:

import botaoConclui from './componentes/concluirTarefa.js'

Espero ter ajudado!