Javascript 正在消失的HTML-函数

我想为我的网站做一个小计算器。我希望能够在文本输入中写入一个数字，然后返回该数字的两倍。我一开始就这样试过：

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

函数计算（）{
var x=document.forms[0]。元素[0]。值；
文件编写（x*2）；
}

这工作正常，但是当使用按钮调用函数（calc（））时，所有HTML都被删除。唯一出现的是您编写的数字（变量x）的两倍。我读到“函数”使所有其他HTML消失

是否可以使页面保持不变，但同时显示计算的数字（x*2）？不使用函数是否可以到达变量x？ 是否可以“控制”计算出的数字（x*2）在JavaScript或HTML中的显示位置和方式

我对这种编码技术还不熟悉，希望能找到一种相对简单的方法来解决这个问题

---

谢谢

最好的方法可能是在表单外添加一个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>

函数计算（）{
var x=document.forms[0]。元素[0]。值；
var结果=x*2；
document.getElementById（“结果”）.innerHTML=result；
}

添加到原始代码和接受的答案中

确保您检索的值是整数（或浮点）。这样可以防止用户得到奇怪的结果。 您可以这样做：

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

函数计算（）{
var x=parseFloat（document.forms[0].elements[0].value）；//或parseInt（document.forms[0].elements[0].value）
var结果=x*2；
document.getElementById（“结果”）.innerHTML=result；
}

King！非常感谢你！很高兴我能帮忙！希望你和我一样喜欢编程：）