时间戳

首页 > 解决方案 > 执行脚本后页面底部消失

javascript - 执行脚本后页面底部消失

问题描述

我正在编写一个页面，使用户能够输入他们的简历。我向他们展示了一个标准的 html 表单，其中包括通常的基本信息（姓名、地址等）。然后，对于高等教育和工作经验，我展示了一组相关字段，并提供了一个选项，可以通过分别执行脚本 addTerciario() 和 addExp() 的按钮添加更多字段。

我遇到的问题是，当我执行脚本时，我松开了页面的底部（id="experienciaspan" 的跨度末尾以下的所有内容）。这发生在 chrome 和 edge 中（尚未测试其他浏览器）。

我将所有花哨的 css 和其他 javascript 剥离到一个基本的 html 文档中，它仍在发生。

我放了一个控制台日志来输出文档的innerhtml，都在那里，包括添加的字段和页面底部，但是它没有被渲染！

关于我在这里做错了什么的任何想法？

下面是我的 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”和“referencia”的新字段将出现在“experienciaspan”范围内，输入任何值以前由用户保存。这确实发生了，但具有使低于所述跨度的所有内容消失的副作用。完全奇怪的是，在执行脚本 addTerciario() 时也会发生这种情况，这与跨度“experienciaspan”无关。

标签： javascripthtml

解决方案

问题是所有未闭合的 p 标签。设置 innerHTML 会删除页面的其余部分，因为跨度内第一个未闭合的 p 之后的所有内容都被认为在跨度内。这是关闭所有 p 标签的 html：

<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>
            <p>Carrera: <input name="carrera"> </p>
            <p>Comentario (opcional) <input name="terciaria_comentario" height="2"></p>
            </span>
            <hr/>
            <p><button type="button" onclick="addTerciario()">+ Agregar educación terciara/universitaria</button> </p>
            <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> </p>
            <hr/>
            <span id="experienciaspan">
            <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>
            </span>
            <hr/>
            <p><button type="button"  onclick="addExp();">+ Agregar experiencia</button> </p>
        </form>
        <p>.</p>

推荐阅读