消失的HTML -功能

Disappearing HTML - Function

本文关键字：功能 HTML 消失      更新时间：2023-09-26

我正在尝试为我的网站制作一个小型计算器。我希望能够在文本输入中写入一个数字，然后获得该数字的双精度。我一开始是这样尝试的:

<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吗?是否有可能"控制"计算的数字(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>

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

确保您检索的值是一个整数(或浮点数)。这样你就可以防止用户得到奇怪的结果。你可以这样做:

<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>
相关文章：