Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Cannot set properties of null (setting 'innerHTML')

Referente ao curso JavaScript na Web: manipule o DOM com JavaScript, no capítulo Adicionar item na lista e atividade Adicionando Tarefa

por VANESSA CRISTINA ESTANISLAU ONORIO
| 116.2k xp | 61 posts

Alguém pode me ajudar?

O erro:

listaDeTarefas.js:11 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at HTMLButtonElement.criarTarefa (listaDeTarefas.js:11)

Meu código: INDEX.HTML:

Ceep 

  <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">
  <li class="task" data-task>
    <p class="content">
      comprar um abacate
    </p>
  </li>
  </ul>
</div>
<script src="listaDeTarefas.js"></script>
</body>

JS: const criarTarefa = (evento) => {

evento.preventDefault()

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

const tarefa = document.querySelector(['data-task'])    
const conteudo = `<p class="content">${valor}</p>`

tarefa.innerHTML = conteudo

input.value = " "

}

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

novaTarefa.addEventListener('click', criarTarefa)

2 respostas
solução!
por Mateus Henrique
| 992.2k xp | 1546 posts
Instrutor Desenvolvedor

Fala Vanessa, tudo bem? Espero que sim!

O problema está na função criarTarefa, onde na criação da variável tarefa você passa um valor incorreto para o querySelector: ['data-task'], sendo o correto '[data-task]', ja que você estaria passando uma array como parâmetro e não uma string, assim ficando a função:

const criarTarefa = (evento) => {
evento.preventDefault()

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

const tarefa = document.querySelector('[data-task]')    
const conteudo = `<p class="content">${valor}</p>`

tarefa.innerHTML = conteudo

input.value = " "
}

Espero ter ajudado, abraços e bons estudos :D

por VANESSA CRISTINA ESTANISLAU ONORIO
| 116.2k xp | 61 posts

Aaahh, muito obrigada!