无法使用javascript在我的HTML表单中显示数据

Question

我正在做一个网站作为一个类的项目，我是javascript新手，我需要一些帮助。

对项目的评估包括拥有表格，使它们显示信息，然后制作表格（在这种情况下“在网站上”注册“），然后使用.document.getElementById("")制作一个小的javascript 。 最后，当按下提交按钮时，您刚放入表单中的信息应显示在下方。

所以这就是我的意思。 （我只会显示包含提交按钮的最后一个表，因为它是一个很大的html）

<table class="tablasub" border="0" width="600px" height="70px">
    <tr>
        <td>
            <form name="registrarocancelar">

            <input class="registrarse" id="btn-entrar0" type="submit" name="btn-entrar0" value="Registrarse" >

            <input class="cancelarsub" type="submit" name="cancelarsub" value="Cancelar" formaction="main.html">

            </form>
        </td>
    </tr>
</table>

<center><span class="" id="div_abajo1"></span></center>
    <script src="js.js"></script>

在js文件中我有这个。

    document.getElementById("btn-entrar0").addEventListener("click", funcionBoton);

function funcionBoton() {
    var nombre = document.getElementById("nombre")
    var correo = document.getElementById("correo")

    document.getElementById("div_abajo1").innerHTML = '<table><tr><td>Muchas gracias' +nombre+', te has registrado con el correo'+correo+'. Gracias por preferirnos.</td></tr></table>' 
}

提前感谢任何帮助或评论过的人。

Answer 1

您的代码是正确的，并且正在执行您希望它执行的操作。

但是，当您单击“ Registrarse按钮时，表单将被提交并作为结果将您带到另一页。

您可以通过在<form>上执行onsubmit="return false"来防止这种情况发生。

这将使表单不执行任何操作，并在提交表单时return false 。

 document.getElementById("btn-entrar0").addEventListener("click", funcionBoton); function funcionBoton() { var nombre = document.getElementById("nombre") var correo = document.getElementById("correo") document.getElementById("div_abajo1").innerHTML = '<table><tr><td>Muchas gracias' +nombre+', te has registrado con el correo'+correo+'. Gracias por preferirnos.</td></tr></table>' } 

 <table class="tablasub" border="0" width="600px" height="70px"> <tr> <td> <form name="registrarocancelar" onsubmit="return false"> <input class="registrarse" id="btn-entrar0" type="submit" name="btn-entrar0" value="Registrarse" > <input class="cancelarsub" type="submit" name="cancelarsub" value="Cancelar" formaction="main.html"> </form> </td> </tr> </table> <center><span class="" id="div_abajo1"></span></center> 

Answer 2

您必须将此行添加到表单标记以防止重定向提交。 onsubmit="return false"

Answer 3

感谢所有帮助过的人。

经过几个小时与我大学的一些程序员讨论并不停地思考它，我得到了解决方案。

基本上在var nombre = document.getElementById("nombre")代码中，我缺少.value; 。 我还将<form>标签移动到<form>的顶部，如果有人想看到整个代码，只要求它，我会发送给你。

所以最后代码看起来像这样。 （注意我改变了一些ID，但无论哪种方式都使用旧ID，它都会有效）

HTML代码

<table class="tablasub" border="0" width="600px" height="70px">
    <tr>
        <td>
        <input class="registrarse" id="btn-entrar0" type="submit" name="btn-entrar0" value="Registrarse" >

         <input class="cancelarsub" type="submit" name="cancelarsub" value="Cancelar" formaction="main.html">

            </td>
        </tr>
    </table>
    </form>
    <center><spam class="" id="div_abajo1"></spam></center>
            <script src="js/js.js"></script>
    </header>

    </body>
    </html>

Java代码

document.getElementById("btn-entrar0").addEventListener("click", funcionBoton);

function funcionBoton() {
    var nombre = document.getElementById("inputnombre").value;
    var correo = document.getElementById("inputcorreo").value;


    console.log(nombre)
    document.getElementById("div_abajo1").innerHTML = 'Muchas gracias'+nombre+', te has registrado con el correo'+correo+'. Gracias por preferirnos.'
}