消失的 HTML - 功能答案

【问题标题】：Disappearing HTML - Function消失的 HTML - 功能
【发布时间】：2015-05-30 17:11:18
【问题描述】：

我正在尝试为我的网站制作一个小型计算器。我希望能够在文本输入中写一个数字，然后取回该数字的两倍。我一开始是这样尝试的：

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

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

是否可以让页面保持不变，但同时显示计算出的数字（x*2）？我可以在不使用函数的情况下达到变量 x 吗？是否可以在 JavaScript 或 HTML 中“控制”计算出的数字 (x*2) 将出现在何处以及如何出现？

我是这种编码艺术的新手，希望找到一种相对简单的方法来解决这个问题。

谢谢！

【问题讨论】：

标签： javascript html function calculator

【解决方案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>

【讨论】：

国王！非常感谢！
很高兴能帮上忙！希望你和我一样喜欢编程 :)

【解决方案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>

【讨论】：