0

Se o título do tópico ficou confuso peço desculpas, porque não sei como eu faria a minha pergunta de forma resumida e correta, mas é o seguinte...

Estou na reta final de um curso de informatica (acaba dia 13 desse mês) e a última tarefa do curso é criar um app para celular usando html, css e javascript e por fim fazer o porte para celular usando o Phonegap

O problema é que o curso não ensina JS (ensina apenas html e css) e eu estou com muita dificuldade em aprender JS, além da data de entrega estar muito próxima, a ideia do meu app é criar listas

inserir a descrição da imagem aqui

Conforme esta na imagem, preciso fazer uma função para que quando eu clique no botão "Adicionar Item" na página seja adicionado outra caixa (um retangulo com input e textarea dentro dele) igual as duas que estão abaixo do input para adicionar titulo a lista

Sou muito leigo com JS, assisti várias vídeo aulas para tentar aprender, mas ainda não consegui entender nem a sintaxe básica direito

O que eu gostaria de saber é: o que eu deveria focar em aprender especificamente de JS, para fazer o botão "Adicionar Item" funcionar da forma que eu descrevi, e como eu faria para que as caixas criadas e as informações digitadas pelo cliente nos inputs e textarea salvem

Desde já peço desculpas pela minha leguisse no assunto

Meu HTML (somente o da pagina da imagem)

let currentItem = 3;
function adicionarItem(e) {
e.preventDefault(); // evitar que o form seja submetido

// criar o input
let input = document.createElement('input');
with (input) {
    classList.add('titulo');
    placeholder = 'Digite o Título da lista';
    maxLength = 19;
}
// criar o textarea
let textarea = document.createElement('textarea');
with (textarea) {
    classList.add('descricao');
    cols = 5;
    rows = 5;
    maxLength = 130;
}

// adiciona ambos em um div
let div = document.createElement('div');
div.id = 'retangulo' + currentItem; // usa o contador como parte do id
div.appendChild(input);
div.appendChild(textarea);

// atualiza o contador (assim o próximo div não terá id repetido)
currentItem++;

// adiciona a div no form
document.querySelector('#formulario').appendChild(div);
}

// ao clicar no botão, adiciona um novo item
document.querySelector('#botaoNovoItem').addEventListener('click', adicionarItem);
body {}

div {
  text-align: center;
  align-items: center;
}

.botao {
  background: #00FFFF;
  cursor: pointer;
  color: black;
  border: 0;
  text-decoration: none;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  width: 300;
  font-size: 50;
  box-shadow: 2px 2px 0 1px #131;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  outline: 0;
  padding: 50px 0px 0px 0px;
}

.botao:active {
  box-shadow: 0 0 0 0 #131, inset 3px 3px 3px #131;
  transform: translate (3px, 3px);
}

.botaor {
  background: #836FFF;
  cursor: pointer;
  color: white;
  border: 0;
  text-decoration: none;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  width: 300;
  font-size: 50;
  box-shadow: 2px 2px 0 1px #131;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  outline: 0;
}

.botaor:active {
  box-shadow: 0 0 0 0 #131, inset 3px 3px 3px #131;
  transform: translate (3px, 3px);
}

.listas {
  font-size: 50;
  text-align: center
}

.loading {
  font-size: 50;
  text-align: center
}

.logo {
  width: 856;
  height: 502;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.titulo {
  width: 300;
  height: 45;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 28;
}

#retangulo {
  width: 300;
  height: 200;
  border: 3px solid;
  border-color: black;
  background: white;
  margin-left: auto;
  margin-right: auto;
}

.item {
  width: 280;
  height: 45;
  margin-top: 5;
  font-size: 25;
}

.descricao {
  width: 290;
  height: 140;
  margin-top: 9;
  font-size: 20;
}

.adicionaritem {
  margin-left: 400;
  background: #00BFFF;
  cursor: pointer;
  color: white;
  border: 0;
  text-decoration: none;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  box-shadow: 2px 2px 0 1px #131;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  outline: 0;
  padding: 10px 0px 0px 0px;
  font-size: 15;
  width: 100;
}

.adicionaritem:active {
  box-shadow: 0 0 0 0 #131, inset 3px 3px 3px #131;
  transform: translate (3px, 3px);
}

.voltar {
  margin-left: 400;
  background: #00BFFF;
  cursor: pointer;
  color: black;
  border: 0;
  text-decoration: none;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  box-shadow: 2px 2px 0 1px #131;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  outline: 0;
  padding: 0px 0px 0px 0px;
  font-size: 15;
  width: 100;
}

.voltar:active {
  box-shadow: 0 0 0 0 #131, inset 3px 3px 3px #131;
  transform: translate (3px, 3px);
}
<html>
  <head>
  <title> Criar Lista </title>
  <link rel="stylesheet" type="text/css" href="personalizacao.css" />
  <script type="text/javascript" src= "javascript.js"> </script> 
  </head>

                                   <body>
                                   
                                 
                                   
                        <a href="2-Tela Inicial.html"> <button class="voltar"> ⬅ Voltar para o início  </button></p> </a>
                        
                        <input type="text" class="titulo" placeholder="Digite o Título da lista" maxlength=18>
                        
                        
                        <form id="formulario">
  <button id="botaoNovoItem" class="adicionaritem">Adicionar item</button>
  <div id="retangulo1">
<input type="text" class="item" placeholder="Novo item" maxlength=19> 
<textarea class="descricao"  cols="5" rows="5" maxlength=130></textarea>
  </div>
  <div id="retangulo2"> 
<input type="text" class="item" placeholder="Novo item" maxlength=19> 
<textarea class="descricao"  cols="5" rows="5" maxlength=130></textarea>
  </div>
</form>
                        
                
                        
                        
                        
                    
                          
  
                                    </body>


</html>

2 Respostas 2

1

Para adicionar um novo item, você pode dar uma pesquisada na função appendChild se for JavaScript puro, ou append se você estiver usando jQuery. Tem um exemplo bem bacana em português aqui.

E para pegar os dados dos campos, você pode a função getElementById ou getElementsByTagName juntamente com a propriedade value, que também está no link do exemplo anterior.

Espero ter ajudado e boa sorte com o trabalho.

1
  • Agradeço pela dica, salvei o site aqui, certamente vou usa-ló, obrigado!!! Commented 5/08/2020 às 2:01
1

A ideia básica é usar createElement para criar os novos campos e adicioná-los em algum elemento já existente.

Tem outros detalhes para arrumar, como por exemplo:

  • um id deve ser único na página, mas você criou dois div's com o mesmo id. Isso não dá erro (no sentido de não carregar a página), mas ao buscar ou manipular esses elementos, o JavaScript não se comportará da maneira esperada (pois as funções que usam o id assumem que ele é único)
  • o HTML está mal formado (tem tags que fecham sem a respectiva abertura, as div's não têm o fechamento, etc). Então eu eliminei algumas partes no exemplo abaixo, e deixei somente o essencial para o exemplo (depois você completa com o restante do seu código)

Também eliminei boa parte do CSS, já que é somente "visual" e não interfere no JavaScript (pois a ideia é focar no funcionamento deste, então depois você adiciona novamente seu CSS).

Coloquei as div's dentro de um form, pois entendo que a ideia seja submeter estes dados posteriormente (se for só para preencher e não fazer nada, me pareceria inútil), então estes elementos deveriam estar em um form. Aproveitei para deixar este form como o elemento no qual serão adicionadas as novas div's.

let currentItem = 3;
function adicionarItem(e) {
    e.preventDefault(); // evitar que o form seja submetido

    // criar o input
    let input = document.createElement('input');
    with (input) {
        classList.add('titulo');
        placeholder = 'Digite o Título da lista';
        maxLength = 19;
    }
    // criar o textarea
    let textarea = document.createElement('textarea');
    with (textarea) {
        classList.add('descricao');
        cols = 5;
        rows = 5;
        maxLength = 130;
    }

    // adiciona ambos em um div
    let div = document.createElement('div');
    div.id = 'retangulo' + currentItem; // usa o contador como parte do id
    div.appendChild(input);
    div.appendChild(textarea);

    // atualiza o contador (assim o próximo div não terá id repetido)
    currentItem++;

    // adiciona a div no form
    document.querySelector('#formulario').appendChild(div);
}

// ao clicar no botão, adiciona um novo item
document.querySelector('#botaoNovoItem').addEventListener('click', adicionarItem);
div {
  border: 3px solid black;
  margin: 3px;
  padding: 3px;
}
<form id="formulario">
  <button id="botaoNovoItem" class="adicionaritem">Adicionar item</button>
  <div id="retangulo1">
    <input type="text" class="item" placeholder="Novo item" maxlength=19> 
    <textarea class="descricao"  cols="5" rows="5" maxlength=130></textarea>
  </div>
  <div id="retangulo2"> 
    <input type="text" class="item" placeholder="Novo item" maxlength=19> 
    <textarea class="descricao"  cols="5" rows="5" maxlength=130></textarea>
  </div>
</form>

2
  • Obrigado pela dica, alterei o código do meu html conforme o código que vc mandou e adicionei o JS, porem o botão "Adicionar Item" não funcionou, olhando no Console apareceu a seguinte mensagem de erro " Uncaught TypeError: Cannot read property 'addEventListener' of null at javascript.js:35". Revisei o código para ver se eu conseguia encontrar o erro mas não consegui, vou atualizar a pergunta com o código de agora, se conseguir me apontar aonde eu errei seria de grande ajuda. Commented 5/08/2020 às 1:42
  • Atualização: percebi pela visualização aqui do fórum que ao invés de estar adicionando as textareas e os inputs que preciso, esta criando inputs novos do titulo, estranhamente ao testar no Google Chrome nem isso cria Commented 5/08/2020 às 2:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .