消失 HTML - 函数

Question

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

<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）的两倍。我读到 "function" 使所有其他 HTML 消失。

是否可以让页面保持不变，但同时显示计算出的数字(x*2)？我可以在不使用函数的情况下访问变量 x 吗？是否可以 "control" 计算出的数字 (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>

消失 HTML - 函数

Disappearing HTML - Function

javascript

html

function

calculator