我可以't在html中显示部分

I can't show section in html

本文关键字：html 显示部 我可以      更新时间：2023-09-26

我有一个隐藏的节("secundaria")，我想用js从节外显示它。该节及其css为：

<section id="secundaria">
    <!--Formulario 2-->
        <h3>Nuevo pedido</h3>
         <form id="formulario_secundario">
                Nombre:
                <input type="text" name="Nombre" value="" />
                <br/>
                Fecha de cierre:
                <input type="text" name="Fecha_cierre" value="" />
                <br/>
                <input type="submit" value="Aceptar" name="aceptar" onclick="validar_rellenar(this.form)" />
                <br/>
                <input type="submit" value="Cancelar" name="cancelar">
            </form>
        </section>

及其css：

section#secundaria{
    visibility:hidden;
}

我想用这个功能从这个表格中显示它：

<form id="nuevo_form">
    Envio:
    <input type="text" name="envio" value="" />
    <br/>
    <input type="submit" id="nuevo" value="" onclick = "nuevo_formulario()">
</form>
<script>
    function nuevo_formulario(){
        console.log(document.getElementById("secundaria").style.visibility);
        document.getElementById("secundaria").style.visibility = "visible";
        console.log(document.getElementById("secundaria").style.visibility);
        document.getElementById("nuevo_form").reset();
    }
</script>

这是为了上课，所以我的老师希望函数和部分在另一个部分里，形式在外面。谢谢

您的代码工作正常。问题是submit类型的input将隐式发送表单，从而导致页面重新加载。更改为type="button"，一切正常。

function nuevo_formulario() {
  console.log(document.getElementById("secundaria").style.visibility);
  document.getElementById("secundaria").style.visibility = "visible";
  console.log(document.getElementById("secundaria").style.visibility);
  document.getElementById("nuevo_form").reset();
}
#secundaria {
  visibility: hidden;
}
<section id="secundaria">
  <!--Formulario 2-->
  <h3>Nuevo pedido</h3>
  <form id="formulario_secundario">
    Nombre:
    <input type="text" name="Nombre" value="" />
    <br/>Fecha de cierre:
    <input type="text" name="Fecha_cierre" value="" />
    <br/>
    <input type="submit" value="Aceptar" name="aceptar" onclick="validar_rellenar(this.form)" />
    <br/>
    <input type="submit" value="Cancelar" name="cancelar">
  </form>
</section>
<form id="nuevo_form">
  Envio:
  <input type="text" name="envio" value="" />
  <br/>
  <input type="button" id="nuevo" value="" onclick="nuevo_formulario()">
</form>

检查这个小提琴：https://jsfiddle.net/zjwon1sy/

只需更改输入input type="button"

相关文章：