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 MEGATRON
      Crie um código em JavaScript que receba 2 palavras, e depois as imprima
      intercaladas. Ex.: “Joao” e “Mary”; a impressão deve ser: “JMoaaroy”. Use uma função
      que receba as duas palavras, e faça a intercalação.
    • By Alyss
      Olá!
       
      Esotu com uma certa dificuldade em um projeto que estou desenvolvendo em relação a funcionalidade drag and drop com jQuery/JavaScript.
       
      <div class="pricipal-menu"> <div class="col-1"> <img src="imagem/1.png"> <img src="imagem/2.png"> <img src="imagem/3.png"> </div> <div class="col-2"> <img src="imagem/1.png"> <img src="imagem/2.png"> <img src="imagem/3.png"> </div> <div class="col-3"> <img src="imagem/1.png"> <img src="imagem/2.png"> <img src="imagem/3.png"> </div> <div class="col-4"> <img src="imagem/1.png"> <img src="imagem/2.png"> <img src="imagem/3.png"> </div> </div> Bom, o que quero fazer é, por exemplo, pegar a img1 da primeira coluna (1, 1) e passá-la para a coluna 2 na posição da img2  (2,2). Até ai tudo bem, o problema é , preciso que quando a img1 for colocada na posição (2,2) a img2 que está na vá para (1,1). Exatamente como um $(...).sortable(), aliás, já tentei até mesmo com o connectWith do sortable(), mas não adianntou muito.
       
      Mais resumidamente, é fazer com que as imagens invertam a posição entre as colunas, mas não sei como.
       
      OBS: já tentei, inclusíve, colocá-las em variáveis pra depois assumirem as posições com o drag'n drop, mas cheguei no mesmo resultado  do connectWith.
       
      Agradeço a atenção!
       
       
    • By peterstefan
      olá, gostaria de uma ajuda, tenho um caminho de arquivo e uma das pastas sempre eu troco ela e gostaria de deixar ela dinamica, toda vez que eu trocar a pasta eu não preciso ir no js e trocar também o nome da pasta...
       
      segue link onde esta escrito PASTA quero deixar ela pegando dinacimcamente a pasta do thema, assim quando eu trocar o nome dela esse link fique automatico...
       
      var url = BASE + '/themes/PASTA/_ajax/control.ajax.php';  
    • By eduuamorim
      Boa noite! Sou novo aqui no fórum e tenho umas dúvidas de como implementar um simulador de linha de crédito passado pelo cliente.

      Vou deixar as informações que ele precisa ter no simulador, se alguém puder me ajudar ou me dar uma luza vou ser grato de coração.
       
      Obs: Não entendo nada sobre esse tipo de simulador, peguei o projeto na raça e quero terminar ele logo, conto com  a ajuda de todos, grato desde já!
       
       
      Informações do cliente nos prints abaixo:
       




    • By DinhoPHP
      Olá!
      Alguém pode me dar uma luz sobre fazer um ORDER BY, hora ASC ou hora DESC? Por favor! Estou utilizando PHP e JS no projeto.
       
      $pegadados = $pdo->prepare("SELECT * FROM produtos WHERE categoria LIKE '%$dataSearch%' OR marca LIKE '%$dataSearch%' OR produto LIKE '%$dataSearch%' OR modelo LIKE '%$dataSearch%' OR descricao LIKE '%$dataSearch%' ORDER BY $filter $filter2");
×

Important Information

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