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 xdxddxd
      Galera neste site aqui tem umas setas em um accordion, e eu gostaria de saber como faço para elas se movimentarem a cada clique.
      se alguem conseguir algum link com tutorial ou me passar algum script eu sou imensamente agradecido.
      estou usando o accordion padrão do bootstrap 4+
      Clique neste: Exemplo
    • By joaopedropeterle
      Boa tarde pessoal!
       
      Preciso fazer os valores digitados no campo do formulário serem escritos de forma inversa, pois se trata de dinheiro, nada do que fiz deu certo até agora... meu código está assim:
       
      var valor = $("#valor"); valor.keyup(() => { valor.val(VMasker.toPattern(valor.val(), "999.999.999,99", {reverse: true})); }) #valor é a ID do campo onde será inserido... Não sei se fui bem claro, sou apenas iniciante...rsrs
    • By tetsuo
      <html> <head> <title>js fetch</title> </head> <body> <script> document.addEventListener('DOMContentLoaded', function () { fetch('api/', { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } }).then(response => response.json().then(result => console.log(result))); //.then(response => console.log(response.json())); }); </script> </body> </html> Olá Pessoal!
      Por quê a linha comentada(linha 16) não funciona?
      Enquanto a 15 funciona.
    • By DinhoPHP
      Olá! Peguei um feela, onde o cliente possui um campo de busca de reservas do Booking. A solicitação era de um menu moderno em tecnologias de estilo, seguindo o layout já desenvolvido por ele, até aí tudo bem. O problema é como fazer com que esses dados do formulários passados via GET, sejam recebidos corretamente pela página de resultados do Booking.com
      Tentei, utilizando mesmo names e ids da busca original, porém, o resultado desejado é satisfatório apenas onde digita o que desejamos buscar.
      <script type="text/javascript"> (function(d, sc, u) { var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0]; s.type = 'text/javascript'; s.async = true; s.src = u + '?v=' + (+new Date()); p.parentNode.insertBefore(s,p); })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js'); </script> <body> <div class="container"> <div class="row bg-primary justify-content-center my-3 text-white"> <form id="b_frm" method="get" action="https://www.booking.com/searchresults.html" enctype="multipart/form-data" class="form-inline my-3" target="_blank"> <div class="col-12 col-sm-12 col-md-6" data-test="true"> <label for="txt-search" class="justify-content-start"><i class="fas fa-search mr-1"></i>Pesquisar</label> <input type="search" id="b_destination" class="form-control w-100" name="ss" id="b_destination" value="Guarujá" title="Ex.: cidade, região, bairro ou hotel específico" placeholder="Ex.: cidade, região, bairro ou hotel, casa, apartamento" role="textbox" aria-haspopup="true"> <input type="hidden" name="dest_id" value="-645946"> <input type="hidden" name="dest_type" value="city"> </div> <div id="checkin_target" class="col-12 col-sm-12 col-md-3"> <label for="txt-date-in" class="justify-content-start">Data de entrada</label> <select class="form-control w-100" name="checkin_monthday" id="b_checkin_day"></select> <select class="form-control w-100" name="checkin_year_month" id="b_checkin_month"></select> </div> <div id="checkout_target" class="col-12 col-sm-12 col-md-3"> <label for="txt-date-out" class="justify-content-start">Data de saí­da</label> <select class="form-control w-100" name="checkout_monthday" id="b_checkout_day"></select> <select class="form-control w-100" name="checkin_year_month" id="b_checkout_month"></select> </div> <div class="col-12 d-inline-flex justify-content-end mt-3"> <label for="checkReserv"> <input type="checkbox" class="form-check-inline" name="checkReserv" id="checkReserve"> Reserve agora, pague depois </label> </div> <div class="col-12 d-inline-flex justify-content-end mt-3"> <button type="submit" tabindex="0" class="btn btn-danger form-control" value="search">Pesquisar</button> </div> <input type="hidden" name="error_url" value="/?aid=1704408;"> <input type="hidden" name="si" value="ai,co,ci,re,di"> <input type="hidden" name="label" value=""> <input type="hidden" name="lang" value="pt-br"> <input type="hidden" name="aid" value="1704408"> <input type="hidden" name="sp_plprd" value="UmFuZG9tSVYkc2RlIyh9YVXcKaaJl1Cl8VOf4QzoGuIOLLs5aG2FZ2ZavnPQr-nKVGXKwhi-SxV27wZ5e4ad8ZB_vNL0FpUBWR1nsdbY6J6ZBGBM6rnqKJd1-J9bY_Ur"> <input type="hidden" name="utm_campaign" value="nsb"> <input type="hidden" name="utm_medium" value="sp"> <input type="hidden" name="utm_source" value="FP_Searchbox"> <input type="hidden" name="utm_term" value="1704408"> </form> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://s.bookcdn.com/js/translations/translation_31.26.js"></script> <script src="https://s.bookcdn.com/build/booked/booked_bundle.74f2565a43a50d618c66d31c0adba095.js"></script> <!-- <ins class="bookingaff" data-aid="1704408" data-target_aid="1704408" data-prod="nsb" data-width="100%" data-height="auto" data-lang="xb" data-currency="BRL" data-dest_id="-645946" data-dest_type="city"> Anything inside will go away once widget is loaded. <a href="//www.booking.com?aid=1704408">Booking.com</a> </ins>--> </body>  
       
       
    • By rxhxtx
      Boa noite amigos,
       
      estou com um problema em um script, ele funciona desta forma:
      <script> function validate(){ var i = 0, counter = 0, testeCB; testeCB = document.forms[0].testeCB; for (; i < testeCB.length; i++) { if (testeCB[i].checked) { counter++; } } if (counter==0){ alert("Você precisa selecionar pelo menos um") return false; } return true; } </script> <input type="checkbox"id="cb1" name="testeCB" value="1"> <input type="checkbox"id="cb2" name="testeCB" value="2">  
      mas quando eu substituo o name para name="testeCB[]"  para conseguir armazenar no BD, para de funcionar....
       
      apos algumas pesquisas, o menlhor que consegui encotrar foi isto
       
      testeCB = document.forms[0].elements['testeCB[]'];  
      substituir ali, mas mesmo assim nao funciona,
       
      alguem tem alguma solução??
       
       
       
×

Important Information

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