Style.Top property doesn't last

Question

I have a problem with a php page. What I want is a button that can put a table (inserted with php) to change its TOP from 310px to 500px. The table starts like this:

<?php
print('<table id="bloque" style="top:310px;">');
print("<tr>");
print("<th>Código</th>");
?>

My script is like this:

<script type="text/javascript">
    function nuevo(){
        document.getElementById("bloque").style.top="500px";
    }       
</script>

And my button is like this:

<INPUT TYPE="submit" VALUE="Nuevo Registro" onClick="nuevo();">

When I click on the button, the table goes to Top 500px, but immediately goes back to 310px. Is there a property that I am missing?

Answer 1

You are using on submit and not actual button. Change your HTML to

<button type="button" onclick="nuevo();">Nuevo Registro</button>

 function nuevo() { document.getElementById("bloque").style.top = "500px"; } 

 #bloque { position: absolute; } 

 <table id="bloque" style="top:310px;"> <tr> <th>Código</th> </tr> </table> <button onclick="nuevo();" type="button">Nuevo Registro</button> 

Answer 2

I think your code is correct, what happens is that you are using an input type submit in your code, so what happens is a page refresh. Then your html returns to the first phase. One solution don't use a submit type button.

Example use:

<button id ="button" type="button" onclick="nuevo();">Nuevo Registro</button>