Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Sobre a aula 4 do Curso iniciante de javaScript

Consegui fazer legal o exemplo da aula proposto na parte da mão na massa, mas depois fiz o mesmo exemplo aproveitando o exercício da aula anterior entretanto não aparece o afazer na lista.

<!-- Código html --> 
<body>
  <ul class="afazeres">
      <li>Ir ao médico</li>
      <li>Trocar a senha do Wifi</li>
      <li>Estudar Javascript</li>
  </ul>
  <form class="adicionar-tarefa">
      <input type="text" name="tarefa">
      <button id="botao-adicionar">Salvar</button>
  </form>
<script src="js/teste.js"></script>
</body>
//Código JavaScript 

var form = document.querySelector('.adicionar-tarefa');
var botao = document.querySelector('#botao-adicionar');
botao.addEventListener("click", function(event){
    event.preventDefault();

  var form = document.querySelector('.adicionar-tarefa');
  var tarefa = form.tarefa.value;

  var afazeresUl = document.createElement("ul");
  var tarefaLi = document.createElement("li");

  tarefaLi.textContent = tarefa;

  afazeresUl.appendChild(tarefaLi);
  console.log(afazeresUl);  
  //Código para adicionar na lista de tarefas
});

O motivo é que isso só funciona com tabelas? No inspecionar elemento, no console aparece o UL e o li, mas não é add na página.

3 respostas

Qual o codigo que voce esta usando para colocar o ul na pagina?

solução!

Oi Douglas

Nesse trecho do código você esta criando uma nova ul

var afazeresUl = document.createElement("ul");

Pq você não aproveita a ul ja criada no html, a de classe afazeres ??

var afazeresUl = document.querySelector(".afazeres");

é só trocar que o seu código vai funcionar. Funcionou aqui comigo

VLW! Jefferson era isso mesmo estava criando e não selecionando. Selecionando a ul, já criada para então criar uma li nova.

Estou aprendendo JavaScript Graças a esse curso :)

insira seu código aqui