我正在写一个页面,可以让用户输入他们的简历。我向他们展示了一个标准的html表单,其中包括常用的基本信息(姓名、地址等)。然后,对于高等教育和工作经验,我提供了一组相关字段,通过分别执行脚本addTerciario()和addExp()的按钮可以添加更多字段。
我将所有花哨的css和其他javascript剥离到一个基本的html文档中,它仍然在发生。
你知道我做错了什么吗?
下面是我的html和javascript。内容是西班牙语的,但它是非常基本的东西,所以我希望您在理解它时不会有问题。
<html>
<head>
<title>Trabajá con nosostros</title>
<meta charset="UTF-8">
</HEAD>
<body>
<p>Trabajá con nosotros</p>
<hr/>
<p> Completá este formulario con tus datos para incorporarte a nuestra base de datos de postulantes. Nos comunicaremos contigo cuando haya un puesto acorde a tu info.</p>
<form class="curriculumform" name="formulario">
<!-- This is where the basic info is entered -->
<span id="terciariaspan">
<p>Terciaria/universitaria:<select name="terciaria"><option value="completa">Completa</option><option value="parcial">Parcial</option><option value="sin">Ninguna</option></select> <span id="TerciariaGradoParcial" >Ãltimo año cursado:<input type="number" name="terciario_parcial_grado" min="1" max="7" value="1"/></span>
<p>Carrera: <input name="carrera">
<p>Comentario (opcional) <input name="terciaria_comentario" height="2"></p>
</span>
<hr/>
<p><button type="button" onclick="addTerciario()">+ Agregar educación terciara/universitaria</button>
<h3>Experiencia laboral</h3><p>(De más reciente a más antigua)</p>
<p>¿Estás trabajando acualmente? <select name="trabajando"><option value="si">SÃ</option><option value="no">No</option></select>
<hr/>
<span id="experienciaspan">
<p>Empresa <input name="empresa">
<p>Puesto <input name="puesto">
<p>Desde <input type="date" name="expdesde"/> Hasta <input type="date" name="exphasta"/>
<p> Referencia (opcional) <input name="referencia"/>
</span>
<hr/>
<p><button type="button" onclick="addExp();">+ Agregar experiencia</button>
</form>
<p>.</p>
</body>
<script>
function addTerciario(){
val1=Array.from(document.getElementsByName("terciaria"));
val2=Array.from(document.getElementsByName("terciario_parcial_grado"));
val3=Array.from(document.getElementsByName("terciaria_comentario"));
val4=Array.from(document.getElementsByName("carrera"));
var n=val4.length;
var html="";
for(var i=0;i<n;i++){
v1=val1[i].value;
v2=val2[i].value;
v3=val3[i].value;
v4=val4[i].value;
html+='<p>Terciaria/universitaria:<select name="terciaria" value="'+v1+'"><option value="completa">Completa</option><option value="parcial">Parcial</option><option value="sin">Ninguna</option></select> <span id="TerciariaGradoParcial" >Ãltimo año cursado:<input type="number" name="terciario_parcial_grado" value="'+v2+'" min="1" max="7" value="1"/></span><p>Carrera: <input name="carrera" value="'+v4+'"><p>Comentario (opcional) <input name="terciaria_comentario" value="'+v3+'" height="2"></p>';
}
html+='<p>Terciaria/universitaria:<select name="terciaria"><option value="completa">Completa</option><option value="parcial">Parcial</option><option value="sin">Ninguna</option></select> <span id="TerciariaGradoParcial" >Ãltimo año cursado:<input type="number" name="terciario_parcial_grado" min="1" max="7" value="1"/></span><p>Carrera: <input name="carrera" ><p>Comentario (opcional) <input name="terciaria_comentario" height="2"></p>';
document.getElementById("experienciaspan").innerHTML="";
document.getElementById("experienciaspan").innerHTML=html;
}
function addExp(){
val1=Array.from(document.getElementsByName("empresa"));
val2=Array.from(document.getElementsByName("puesto"));
val3=Array.from(document.getElementsByName("expdesde"));
val4=Array.from(document.getElementsByName("exphasta"));
val5=Array.from(document.getElementsByName("referencia"));
var n=val2.length;
var html="";
for(var i=0;i<n;i++){
v1=val1[i].value;
v2=val2[i].value;
v3=val3[i].value;
v4=val4[i].value;
v5=val5[i].value;
html+='<p>Empresa <input name="empresa" value="'+v1+'"></p><p>Puesto <input name="puesto" value="'+v2+'"></p><p>Desde <input type="date" value="'+v3+'" name="expdesde"/> Hasta <input type="date" value="'+v4+'" name="exphasta"/></p><p> Referencia (opcional) <input name="referencia" value="'+v5+'"/></p>';
}
html+='<p>Empresa <input name="empresa"></p><p>Puesto <input name="puesto"></p><p>Desde <input type="date" name="expdesde"/> Hasta <input type="date" name="exphasta"/></p><p> Referencia (opcional) <input name="referencia"/></p>';
document.getElementById("experienciaspan").innerHTML="";
document.getElementById("experienciaspan").innerHTML=html;
console.log(document.documentElement.innerHTML);
}
</script>
</html>
我希望在执行addExp()函数时,名为“empresa”、“puesto”、“expdesde”、“exphasta”和“referencea”的新字段组将出现在span“experienceIAspan”中,并保留用户以前输入的任何值。
这种情况确实会发生,但其副作用是使上述跨度以下的一切消失。
完全奇怪的是,在执行脚本addTerciario()时也会发生这种情况,这与span“experienceiaspan”无关。
