Entrar Ainda não tem acesso?
6
respostas

Exercício 5 - Uma lista que não cresce

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Eventos, Formulários e Criando Elementos e atividade Uma lista que não cresce

por Andréia Gabriel Benavides
| 300.1k xp | 68 posts
Em busca de novas oportunidades profissionais

Boa tarde pessoal, Eu tentei fazer o exercício para incluir um item na lista de atividades, mas ele cria a lista e não exibe o conteúdo, alguém pode dar uma ajuda por favor?

<!DOCTYPE html>
<html>
<head>
    <title>teste 3</title>
</head>
<body>
    <ul id="afazeres">
        <li class="atividade1">Ir ao médico</li>
        <li class="atividade2">Trocar a senha do Wifi</li>
        <li class="atividade3">Estudar Javascript</li>
    </ul>
<form id="adicionar-tarefa">
    <label for="atividade">Atividade:</label>
    <input type="text" id="tarefa" name="tarefa">
    <button id="botao-adicionar">Salvar</button>
</form>
</body>

<script type="text/javascript">


    var botaoAdicionar = document.querySelector("#botao-adicionar");


        botaoAdicionar.addEventListener ("click", function(event) {
            console.log("cliquei no botao");
             event.preventDefault();
     })

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

    //Código para adicionar na lista de tarefas

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

    var conteudoLi = document.createElement("li");


    afazeresUl.appendChild(conteudoLi);

        function montaUl(afazeres) {
            var afazeresUl = document.createElement ("ul");

            var conteudoLi = document.createElement("li");

            conteudoLi.textContent = li;

            afazeresUl.appendChild(conteudoLi);
        }


        var lista = document.querySelector("#afazeres");

        lista.appendChild(conteudoLi);

</script>
</html>
6 respostas
por Leandro Silva
| 93.5k xp | 9 posts
Full Stack Developer

Olá Andreia. Segue abaixo uma modificação que fiz para lhe ajudar a continuar com o seu estudo. Ocorre que o seu botão não fazia nada alem de logar no console. Tomei a liberdade de criar a função adicionar para que ele chame.

<!DOCTYPE html>
<html>
<head>
    <title>teste 3</title>
</head>
<body>
    <ul id="afazeres">
        <li class="atividade1">Ir ao médico</li>
        <li class="atividade2">Trocar a senha do Wifi</li>
        <li class="atividade3">Estudar Javascript</li>
    </ul>
<form id="adicionar-tarefa">
    <label for="atividade">Atividade:</label>
    <input type="text" id="tarefa" name="tarefa">
    <button id="botao-adicionar">Salvar</button>
</form>
</body>

<script type="text/javascript">


    var botaoAdicionar = document.querySelector("#botao-adicionar");


        botaoAdicionar.addEventListener ("click", function(event) {
            console.log("cliquei no botao");
            adicionar();            
            event.preventDefault();
     })

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

    //Código para adicionar na lista de tarefas
    function adicionar() {
        var novoLi = document.createElement("li");
        novoLi.textContent = "MEU NOVO ITEM";
        var afazeresUl = document.querySelector("#afazeres");
        afazeresUl.appendChild(novoLi);
    }

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

    var conteudoLi = document.createElement("li");


    afazeresUl.appendChild(conteudoLi);

    function montaUl(afazeres) {
        var afazeresUl = document.createElement ("ul");

        var conteudoLi = document.createElement("li");

        conteudoLi.textContent = "oi";

        afazeresUl.appendChild(conteudoLi);
    }        

</script>
</html>

Você pode continuar a implementação dele inicialmente trocando o "MEU NOVO ITEM" pelo texto digitado pelo usuário.

Obs: notei que a função montaUl não estava sendo utilizada por vc, alem disso a mesma possuía um erro na linha conteudoLi.textContent = li; Neste caso o valor li não existe

por Andréia Gabriel Benavides
| 300.1k xp | 68 posts
Em busca de novas oportunidades profissionais

Leandro, boa tarde Eu agradeço a ajuda, mas como sou iniciante eu não entendi o que vc implementou.

Notei que se repetem as linhas var afazeresUl = document.createElement ("ul");

var conteudoLi = document.createElement("li");

e não está funcionando.

se puder explicar mais detalhadamente, eu estava seguindo o exemplo da aula.

por Leandro Silva
| 93.5k xp | 9 posts
Full Stack Developer

Desculpe, Andréia, eu não cheguei a fazer essa aula, respondi baseado no que você me passou, vamos lá.

O que está na função adicionar é apenas um exemplo de como inserir um elemento li na sua lista de afazeres. Sobre a repetição de linhas realmente você está certa, vou colar abaixo o código sem essa repetição e você faz o teste aí ok?

<!DOCTYPE html>
<html>
<head>
    <title>teste 3</title>
</head>
<body>
    <ul id="afazeres">
        <li class="atividade1">Ir ao médico</li>
        <li class="atividade2">Trocar a senha do Wifi</li>
        <li class="atividade3">Estudar Javascript</li>
    </ul>
<form id="adicionar-tarefa">
    <label for="atividade">Atividade:</label>
    <input type="text" id="tarefa" name="tarefa">
    <button id="botao-adicionar">Salvar</button>
</form>
</body>

<script type="text/javascript">

    var botaoAdicionar = document.querySelector("#botao-adicionar");


    botaoAdicionar.addEventListener ("click", function(event) {            
        adicionar(); //função criada logo abaixo para adicionar um item na lista de tarefas            
        event.preventDefault(); //previne que a página seja recarregada após ocorrer o evento de click
     })

    var afazeresUl = document.querySelector("#afazeres"); //seleciona o elemento com id "afazeres" que no caso é a lista de afazeres

    //Código para adicionar na lista de tarefas
    function adicionar() {
        var novoLi = document.createElement("li"); //cria um novo elemento <li> porém neste ponto ele ainda não está presente no seu documento
        novoLi.textContent = "MEU NOVO ITEM"; //altera o texto presente no elemento <li>
        afazeresUl.appendChild(novoLi); //adiciona o elemento criado na lista de afazeres anteriormente selecionada
    }

</script>
</html>

A ideia é que o código da forma como está quando você clicar no botão para adicionar será criado um novo item na lista com o nome "MEU NOVO ITEM". Com isso você conseguiria continuar o seu exercício começando pela parte em que ao invés de adicionar sempre com o texto "MEU NOVO ITEM" fosse adicionado com o texto digitado pelo usuário. Outra dica seria que você implementasse algo que fizesse com que o campo texto digitado pelo usuário fosse apagado após adicionar o item .

por Andréia Gabriel Benavides
| 300.1k xp | 68 posts
Em busca de novas oportunidades profissionais

Olá Leandro, boa tarde O seu código funcionou sim, agora o meu ainda não porque estou tentando fazer com que seja incluída um novo item na lista. Vou tentar aqui e qualquer coisa chamo novamente. Obrigada

por Andréia Gabriel Benavides
| 300.1k xp | 68 posts
Em busca de novas oportunidades profissionais

Pessoal, através da explicação do Leandro cheguei até essa parte do código, a li está sendo criada, porém vazia, coloquei para ser exibido o conteúdo digitado no console e está funcionando, só falta aparecer na lista mesmo. Alguém dá uma dica?

<!DOCTYPE html>
<html>
<head>
    <title>teste 3</title>
</head>
<body>
    <ul id="afazeres">
        <li class="atividade">Ir ao médico</li>
        <li class="atividade">Trocar a senha do Wifi</li>
        <li class="atividade">Estudar Javascript</li>
    </ul>
<form id="adicionar-tarefa">
    <label for="atividade">Atividade:</label>
    <input type="text" id="tarefa" name="tarefa">
    <button id="botao-adicionar">Salvar</button>
</form>
</body>

<script type="text/javascript">
    // Javascript


 var botaoAdicionar = document.querySelector("#botao-adicionar");


        botaoAdicionar.addEventListener ("click", function(event) {

        event.preventDefault(); 

        var form = document.querySelector("#adicionar-tarefa");


        var tarefa = form.tarefa.value;  //pegando o valor digitado no input

        adicionar(); //chamada da função adicionar()    


//Código para adicionar na lista de tarefas
    function adicionar(atividade) {

        var palavraLi = document.createElement("li"); //criando o item de lista

        palavraLi.texContent = tarefa;

         afazeres.appendChild(palavraLi); //colocando a li criada dentro da ul já existente 

         console.log(tarefa); //o valor digitado no input está aparecendo no console.

    }

  })

</script>
</html>
por Leandro Silva
| 93.5k xp | 9 posts
Full Stack Developer

Você conseguiu, Andreia, porém está com um problema de digitação ai, vc digitou texContent no lugar de textContent