Iniciando em JavaScript

JoaoBardella · Junho 2, 2019

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>

<head>

<title>teste</title>

</head>

<body>

<label for="end">Endereço Profissional:</label>

</div>

</form>

<br>

<label for="curso">Curso:</label>

<label for="inst">Instituição:</label>

<label for="anoconclu">Ano Conclusão:</label>

</div>

</form>

</div>

</div>

</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');