Исчезающий HTML - Функция

Question

Я пытаюсь сделать маленький калькулятор-thingy для моего сайта. Я хочу, чтобы иметь возможность написать номер в текстовом вводе, а затем получить двойную цифру обратно. Я попробовал этот способ на первый:

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

Это работает нормально, но при вызове функции (известково()) с помощью кнопки, все HTML удаляется. Единственное, что появляется, это двойное число (переменная x), которое вы написали. Я прочитал, что «функция» заставляет все остальные HTML исчезать.

Возможно ли, что страница останется неизменной, но в то же время показывая расчетное число (x * 2)? Могу ли я получить переменную x без использования функции? Можно ли «контролировать», где и как будет отображаться вычисленное число (x * 2), внутри JavaScript или внутри HTML?

Я новичок в этом искусстве кодирования, надеялся найти относительно простой способ решить эту проблему.

Спасибо!

Answer 1

Лучшим способом, возможно, является добавление div вне формы, предназначенной для отражения рассчитанного значения. Затем вы можете обновить calc, чтобы найти этот div и заменить его содержимое на вычисленное значение.

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

Answer 2

Добавление к исходному коду и принятому с ним вопросу.

Убедитесь, что полученное вами значение является целым числом (или поплавком). Таким образом вы предотвратите получение странных результатов. Вы можете сделать это следующим образом:

<script> 
    function calc() { 
    var x = parseFloat(document.forms[0].elements[0].value);// or parseInt(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>