Question

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

对该项目的评估包括拥有表格，并使其显示信息，然后制作表格（在这种情况下，在网站上“注册”），然后使用{{1}做一点javascript }。最后，当按下提交按钮时，您刚刚放置在表单中的信息应显示在下方。

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

.document.getElementById("")

在js文件中，我有这个。

<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>

在此先感谢提供帮助或发表评论的人。

Answer 1

您的代码正确无误，并且正在执行您想要的操作。

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

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

这将使表单什么也不做，并且在提交表单时仅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>标记移到了表单的顶部，如果有人想查看整个代码，只需索要它，我会将其发送给您。

所以最后，代码看起来像这样。（请注意，我更改了一些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.'
}

无法获取JavaScript以HTML格式显示数据

3 个答案: