Jump to content

Recommended Posts

Bom dia Senhores,

 

Pessoal estou iniciando em Js e gostaria de uma mãozinha. Na faculdade o professor pediu para que eu fizesse um gerador de curriculo em HTML com JS.

Perfeito estou criando, mais enrrosquei em uma parte aqui, temos os campos dos dados pessoais, após tenho os dados de formação, ai que está: Na formação tenho tres inputs criado em HTML para Curso, Instituição e Ano de Conclusão e na frente tenho que ter o botão de mais e menos para inserir e tirar mais inputs contendo o mesmo conteúdo. Tenho um evento em cada input, onkeyup que vai mostrando os dados abaixo. E estou com dificuldade na hora de adicionar esse evento aos input que eu crio automaticamente após criar apertando o botão mais. Alguém pode me ajudar. Vou colocar abaixo meu dois códigos HTML e JS.

 

HTML

 

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>teste</title>
</head>
 
<body>
<form id="dadosP">
<div id="dadosPe">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" onkeyup="mostrar()">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email" onkeyup="mostrar()">
<label for="end">Endereço Profissional:</label>
<input type="text" name="end" id="end" onkeyup="mostrar()">
</div>
</form>
<br>
<form id="dadosEdu">
<div id="dadosEduc">
<label for="curso">Curso:</label>
<input type="text" name="curso" id="curso" onkeyup="mostrar()">
<label for="inst">Instituição:</label>
<input type="text" name="inst" id="inst" onkeyup="mostrar()">
<label for="anoconclu">Ano Conclusão:</label>
<input type="text" name="anoconclu" id="anoconclu" onkeyup="mostrar()">
<button type="button" onclick="maiscurso()">+</button>
<button type="button" onclick="menoscurso()">-</button>
</div>
 
</form>
<br><br>
<div id="mdadosp">
<div id="mnome">
<span id="pmnome"></span><br>
<span id="pmemail"></span><br>
<span id="pmend"></span>
</div>
</div>
<br><br>
<div id="mdadosedu">
<div id="mcurso">
<span id="pmcurso"></span><br>
<span id="pminst"></span><br>
<span id="pmanoconclu"></span>
</div>
</div>
<script src="script.js"></script>
</body>
 
</html>
 
JS
 
var i = 0;
 
function mostrar() {
var nome = document.getElementById("nome").value;
var email = document.getElementById("email").value;
var end = document.getElementById("end").value
 
document.getElementById("pmnome").innerHTML = nome;
document.getElementById("pmemail").innerHTML = email;
document.getElementById("pmend").innerHTML = end;
 
if (i > 0) {
var curso = document.getElementById("curso" + i).value;
var inst = document.getElementById("inst" + i).value;
var anoconclu = document.getElementById("anoconclu" + i).value;
} else {
var curso = document.getElementById("curso").value;
var inst = document.getElementById("inst").value;
var anoconclu = document.getElementById("anoconclu").value;
}
document.getElementById("pmcurso").innerHTML = curso;
document.getElementById("pminst").innerHTML = inst;
document.getElementById("pmanoconclu").innerHTML = anoconclu;
}
function maiscurso() {
i++;
var br2 = document.createElement("br");
var br1 = document.createElement("br");
 
var lbl1 = document.createElement("label");
lbl1.id = "lblcurso" + i;
var t = document.createTextNode("Curso: ");
lbl1.setAttribute("for", "Curso: ");
var inp1 = document.createElement("input");
inp1.id = "curso" + i;
inp1.setAttribute("onkeyup", mostrar());
 
var lbl2 = document.createElement("label");
lbl2.id = "lblinst" + i;
var x = document.createTextNode("Instituição: ");
lbl2.setAttribute("for", " Instituição: ");
var inp2 = document.createElement("input");
inp2.id = "inst" + i;
//inp2.addEventListener(onkeyup, mostrar());
 
var lbl3 = document.createElement("label");
lbl3.id = "lblanoconclu" + i;
var z = document.createTextNode("Ano Conclusão: ");
lbl3.setAttribute("for", " Ano Conclusão: ");
var inp3 = document.createElement("input");
inp3.id = "anoconclu" + i;
var br = document.createElement("br");
//inp3.addEventListener(onkeyup, mostrar());
 
document.getElementById("dadosEduc").appendChild(br2);
document.getElementById("dadosEduc").appendChild(br1);
document.getElementById("dadosEduc").appendChild(t);
document.getElementById("dadosEduc").appendChild(inp1);
document.getElementById("dadosEduc").appendChild(x);
document.getElementById("dadosEduc").appendChild(inp2);
document.getElementById("dadosEduc").appendChild(z);
document.getElementById("dadosEduc").appendChild(inp3);
document.getElementById("dadosEduc").appendChild(br);
 
 
// var newdiv = document.createElement('div');
// newdiv.innerHTML += '<label for="curso">Curso:</label><input onkeyup="mostrar()" type="text" name="curso' + line + '_1" id="curso' + line + '_1">';
// newdiv.innerHTML += '<label for="inst">Instituição:</label><input onkeyup="mostrar()" type="text" name="inst' + line + '_2" id="inst' + line + '_2">';
// newdiv.innerHTML += '<label for="anoconclu">Ano Conclusão:</label><input onkeyup="mostrar()" type="text" name="anoconclu' + line + '_3" id="anoconclu' + line + '_3">';
// document.getElementById("dadosEduc").appendChild(newdiv);
// line++;
}
 
//maiscurso('lines');

Share this post


Link to post
Share on other sites

As Linhas 17 18 19 21 22 23 estão precisando de revisão, estão erradas:

 

observe na emulação no jsfiddle como está,  os alertas em amarelo representam inatividade ou efeito nenhum, vermelho não se encaixa:

 

https://jsfiddle.net/hdrzq9yw/

 

Boa Sorte MEEEEU!

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sapinn
      Tenho um form que pergunto o nome, sobrenome, email, idade e telefone de contato. Como faço para verificar se o email digitado já foi cadastrado e retorna na mesma pagina uma mensagem caso ele ja existe ou prosseguir para a area do usuario caso ele não exista sem da refresh na página.
    • By mamotinho
      Olá, gostaria de sabe como posso fazer uma contagem regressiva apartir de um registro em meu banco de dados eu tentei montar um código da seguinte forma:

       
      <? $DateGET = date('m/d/Y H:i A', strtotime($result->DateDiscount)); ?> <script> var valueDate = <?=$DateGET?>; var end = new Date(valueDate); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); document.getElementById("countdown").innerHTML = "EXPIRED!"; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById("countdown").innerHTML = "<span class='n_date day' id='days'>" + days + "</span><span class='date'>일</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time hour' id='hrs'>" + hours + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time minute' id='minus'>" + minutes + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time second' id='secs'>" + seconds + "</span>"; } timer = setInterval(showRemaining, 1000); </script> Mais infelizmente não passou a data registrada no banco de dados, alguém teria ideia de como posso ta fazendo.
    • By Jack Oliveira
      Ola boa tarde pessoal
      poderia me dar uma ajuda preciso fazer um modo de revista  para um site mostrar uns parceiros
      a ideia seria igual deste site aqui
       
      Revista JS
       
      dentro dela seria para lista em grid grupar de 4 em 4 em cada página desta revista nela não terá valores nem nada apenas as imagem mesmo e o titulo
       
      se tiver uma boa solução de como fazer ou se alguém com mais pratica em js e css puder ajudar fico grato
    • By sirrocha
      Olá pessoal, sou iniciante só que tenho um projeto com uma certa pressão de tempo pra fazer. Um dos problemas que estou tendo é relacionado ao clicar em um tipo "a href" e aplicar uma função. Pelo que vi, tenho que usar AJAX mas não tenho nenhuma noção de como iniciar, mesmo vendo muitos vídeos...

      Basicamente tenho uma página onde está carregando algumas sessões. Porém, ao clicar neste botão:
       
      1 <p><a class="link" name="final" id="fin" onclick="finalizar()" href="areaUsuario.php" style="text-decoration:none;">finalizar</a></p>

      Estava tentando chamar uma função do tipo finalizar(), que iria dar UNSET em duas sessões específicas que eu precisava desligar (por isso não posso usar o destroy para tirar todas).
       
      1 2 3 4 5 6 7 8 9 <script type="text/javascript">>     <?php     function finalizar() {         unset($_SESSION['prestacao']);         unset($_SESSION['nomeproj']);         header("location:areaUsuario.php");     }     ?> </script>

      O que eu fiz e falaram que estava errado era isso. Como posso usar o AJAX neste caso para desligar essas duas funções e enviar o usuário para a área inicial? Por favor, se possível, enviar uma base de como poderia fazer com o raciocínio. É algo urgente, mas também gostaria de aprender.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.