Javascript - 我如何从用户那里获取输入并显示输出答案

【问题标题】：Javascript - How can I take Inputs from users and show outputJavascript - 我如何从用户那里获取输入并显示输出
【发布时间】：2015-01-21 18:30:41
【问题描述】：

我在 Javascript、HTML 等方面绝对是菜鸟。我有一个基本问题，我找不到直接的答案，或者至少我无法理解。

我已经制作了这段代码：

<script>
var a = 500000;
var b = 80;
var c = (a-250000)*0.10;
var d = (a-300000)*0.10;
var e = Math.min(c,2000);
var f = Math.min(d,2000);

if (a > 250000 && a < 500001 && b < 60) { 
    document.write(e);
} else if (a > 300000 && a < 500001 && b > 59 && b < 80) {
    document.write(f);
} else {
    document.write("No Rebate");
}
</script>

我想从用户那里获取“a”和“b”的输入值，使用以下代码执行计算，如果条件设置，则向用户显示输出（e 或 f 或无回扣，视情况而定）被满足。

我该怎么做？

到目前为止我尝试的是这个

<form name="calc"> 
<table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
<tr><th colspan="3"><h1>TESTING</h1></th></tr>
<tr>  <th><h3>INPUT</h3></th>
<th><h3>AGE</h3></th>
<th><h3>REBATE</h3></th></tr>
<tr></tr>
<td><input type="text" name="input1" id="input1" onchange="calculate();"/></td>
<td><input type="text" name="input2" id="input2" onchange="calculate();"/></td>
<td><input type="text" name="output" id="output"></td>
<table>
</form>

<script type="text/javascript">
function calculate() {

var a = document.calc.input1.value;
var b = document.calc.input2.value;
var c = (a-250000)*0.10;
var d = (a-300000)*0.10;
var e = Math.min(c,2000);
var f = Math.min(d,2000);

if (a > 250000 && a < 500001 && b < 60) { 
    document.calc.output.innerHTML = e;
} else if (a > 300000 && a < 500001 && b > 59 && b < 80) {
    document.calc.output.innerHTML = f;
} else {
    document.calc.output.innerHTML = "No Rebate"
}
</script>

（我确定我在这里没有正确使用 .innerHTML）

【问题讨论】：

控制台？节点？浏览器？告诉我们你用什么来测试这个脚本。并向我们展示您的尝试
一种选择是创建一个 HTML 文档，上面有一个由文本框和提交按钮组成的表单。单击提交按钮时，存储表单中的值并执行您的脚本。

标签： javascript output calculator

【解决方案1】：

您需要创建 HTML 输入元素来捕获用户输入。您的脚本需要读取值并对某些事件（例如单击按钮）进行计算：

    <html>
    <head></head>
    <body>
    <p>Input value a: <input type="text" onchange="return calculate();" id="txtA" /></p>
    <p>Input value b: <input type="text" onchange="return calculate();" id="txtB" /></p>
    <p id="result"></p>
    <script>

    function calculate(){
        var a = document.getElementById('txtA').value;
        var b = document.getElementById('txtB').value;
        var c = (a-250000)*0.10;
        var d = (a-300000)*0.10;
        var e = Math.min(c,2000);
        var f = Math.min(d,2000);

        if (a > 250000 && a < 500001 && b < 60) { 
            document.getElementById('result').innerHTML = e;
        } else if (a > 300000 && a < 500001 && b > 59 && b < 80) {
            document.getElementById('result').innerHTML = f;
        } else {
            document.getElementById('result').innerHTML = "No Rebate";
        }
        return false;
    }

    </script>
    </body>
</html>

【讨论】：

你真的不应该使用document.write 输出，尤其是在完全合理的document.getElementById 输入之后（除非OP 特别需要纯文本输出）。此外，calculate() 不会返回任何内容，因此 return calculate() 只会返回 undefined。
习惯返回。无论如何 document.write() 都没有关系，我从不这样做，但 OP 暗示这是期望的行为。
谢谢，这几乎是我一直在寻找的，但我正在寻找的这段代码中还有一个更简单的调整，如何使输出出现在第三个输入框中并在同一用户不断更改输入值？
@Crowcoder 谢谢谢谢谢谢谢谢这么多这么多：D