João Bordella teste form

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>

JavaScript

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());
...