Quero criar um botão `adicionar` que quando clicado pede as informações de 5 pessoas num formulário e outro botão consequente que diz `mostrar`, que mostra o array que tem todas as pessoas introduzidas!
Não consigo entender porque não está aparecendo o formulário com todos os campos, podem me ajudar?
Segue código HTML:
<div class="container"><buttononclick="persona()"class="btn btn-primary"id="btn_form">Adicionar</button><buttononclick="infoPersona()"class="btn btn-secondary">Mostrar</button><formid="my_form"><!-- <fieldset><div class="form-group"><label> Nome</label><input class="form-control" placeholder="Digite seu nome" type="text"></div><div class="form-group"><label>Apelido</label><input class="form-control" placeholder="Seu Apelido" type="text"></div><div class="form-group"><label> Idade</label><input class="form-control" placeholder="Qual a sua idade" type="text"></div><input type="submit"></fieldset> --></form></div>const persona = () => {//Criando formconstform=document.getElementById('my_form')//Criando a labelconstlabelElement=document.createElement('label')labelElement.innerHTML+="<label>Nome:</label>"form.appendChild(labelElement)//Criando inputconstinputElement=document.createElement('input')inputElement.type='text'inputElement.className='form-control'inputElement.placeholder='Digite seu nome'form.appendChild(inputElement)constlabelElement1=document.createElement('label')labelElement1.innerHTML+="<label>Apelido:</label>"form.appendChild(labelElement)constinputElement1=document.createElement('input')inputElement1.type='text'inputElement1.className='form-control'inputElement1.placeholder='Digite seu apelido'form.appendChild(inputElement)constlabelElement2=document.createElement('label')labelElement2.innerHTML+="<label>Idade:</label>"form.appendChild(labelElement)constinputElement2=document.createElement('input')inputElement2.type='text'inputElement2.className='form-control'inputElement2.placeholder='Qual a sua idade'form.appendChild(inputElement)//Criando botãoconstinputElement3=document.createElement('input')inputElement2.type='submit'inputElement2.className='form-control'inputElement2.placeholder='Enviar'form.appendChild(inputElement)}
Posso estar enganado,mas acho que tem bastante coisa para consertar.
sugiro que abra uma tarefa para essa atividade.
remove o codigo comentado
<!-- -->
Carolina, tem algumas tags que estão juntas aos atributos, e precisam de espaço, como os botões.
Tire esse comentário também, pois assim vão aparecer os campos.
Para colocar as pessoas quando clicar no botão "mostrar", ti vai precisar criar uma função que vai inserir um HTML(com um layou que desejar) para cada pessoa do array que fez.
Olá, também sugiro que vc abra uma tarefa para o seu caso, pois há erros que só mesmo debugando linha por linha até achar.
Entre eles esses que até alguns amigos aí já disseram:
No HTML, você está comentando todo o formulário, incluindo os campos de entrada. Isso faz com que nenhum campo seja exibido na página. Remova os comentários para que os campos sejam visíveis.
No JavaScript, há alguns erros de digitação e lógica que precisam ser corrigidos:
Ao criar os elementos de input e de label para o apelido e idade, você está reutilizando as variáveis labelElement e inputElement, o que está causando um problema. Cada vez que você cria um novo elemento, deve usar uma nova variável para armazená-lo.
No final da função persona, você está criando um novo input para o botão de envio, mas está utilizando as variáveis erradas (inputElement2 em vez de inputElement3). Além disso, o tipo do input deveria ser 'submit', não 'text'.
No botão 'Mostrar', você chamou a função infoPersona(), mas essa função não está definida no seu código.
* Certifique-se de implementar a lógica necessária dentro da função infoPersona() para exibir as informações das pessoas introduzidas.
Espero ter ajudado!
Aulas particulares
Encontre um professor para combinar e agendar aulas particulares
Buscar professor
Tira-dúvidas
Envie dúvidas e receba respostas imediatas da Minerva,
a IA do Profes, e dos melhores professores particulares
Enviar dúvida
