javascript - Disappearing HTML - Function -

i trying make small calculator-thingy website. want able write number in text-input, double of number back. tried way @ first:

<form name="form"> <input type="text"/> </form>  <script type="text/javascript">     function calc() {     var x = document.forms[0].elements[0].value;     document.write(x*2);     } </script>  <input type="button" onclick="calc()" value="calculate here"/> 

this working fine, when calling function ( calc() ) button, html removed. thing appearing double of number (variable x) wrote. have read "function" make other html disappear.

is possible make page stay same, @ same time showing calculated number (x*2)? can reach variable x without using function? possible "control" , how calculated number (x*2) going appear, within javascript or within html?

i new coding art, hoping find relatively easy way solve this.

thanks!

the best way add div outside form intended reflect calculated value. can update calc find div , replace contents calculated value.

<script>     function calc() {     var x = document.forms[0].elements[0].value;     var result = x * 2;     document.getelementbyid("result").innerhtml = result; } </script>  <form name="form">     <input type="text"/> </form> <input type="button" onclick="calc()" value="calculate here"/>  <div id="result"></div>