Question

这里的html和javascript非常新。我得到以下表格并且计算正确但结果显示在新页面中。我希望它能保持在同一页面。不知道我在这里做错了什么。还有，有什么方法可以缩短功能吗？似乎做了很多工作来做一个简单的计算。任何帮助都会很棒。

<html>
<head>
    <title>Help!</help>
    <script type="text/javascript">
        function add(x,y){
        var x = document.add1.add2.value;
        var y = document.add1.add3.value;
        var x = Number(x);
        var y = Number(y);
        var z = x+y;
        return (z);
        }
    </script>
</head>
<body>
    <h3>Help me stack overflow you're my only hope!</h3>

    <form name="add1">
    Input first number to add: <input type="number" name="add2">
    2nd number: <input type="number" name="add3">
    <input type="button" value="Result"
    onclick = "document.write('The total is: ' + add() + '.');" />

</body>
</html>

Answer 1

不要'document.write使用http://jsfiddle.net/7ujzn35c/来显示数据，它会覆盖整个文档。你不希望这样。最好创建一个将结果呈现给其他元素的新函数：

<input type="button" value="Result" onclick="showResult('The total is: ' + add() + '.');" />

并且showResult函数可以是例如：

function showResult(result) {
    document.getElementById('result').innerHTML = result;
}

HTML：

<div id="result"></div>

演示：http://jsfiddle.net/7ujzn35c/1/

以下是您可以制作代码的一些常规改进：

将字符串操作完全移至showResult：
```
<input type="button" value="Result" onclick="showResult()" />
```
http://jsfiddle.net/7ujzn35c/2/

从add

内拨打showResults

onclick="showResult(this.form.add2.value, this.form.add3.value)"

Answer 2

 <title>Help!</help>

首先，这应该是<title> Help! </title>

其次，document.write函数实际上开始重新编写整个页面。

你应该replace onclick = "document.write('The total is: ' + add() + '.');"和

onclick = "alert('The total is: ' + add() + '.');"

更好的是，你可以像这样创建一个div元素

<title> Help! </title>

<script>
.....
</script>

</header>

<body>

<div id = 'output'> </div> ...

然后

 `onclick = "document.getElementById("output").innerHTML =  'The total is: ' + add() + '.';"

不要放弃。希望这可以帮助你

表单按钮在新窗口中显示结果

2 个答案:

演示：http://jsfiddle.net/7ujzn35c/1/