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）的两倍。我已经读过＆＃34;功能＆＃34;使所有其他HTML消失。

是否可以使页面保持不变，但同时显示计算出的数字（x * 2）？我可以在不使用函数的情况下到达变量x吗？是否有可能控制＆＃34;计算出的数字（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 - 功能

2 个答案: