無法使用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.'
}