Javascript - 如何从用户获取输入并显示输出

时间:2015-01-21 18:30:42

标签: javascript output calculator

我绝对是Javascript,HTML等的noob。我有一个基本的问题,我无法找到直接的答案,或者至少它超出了我的理解范围。

我已经制作了这段代码:

<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或No Rebate,视情况而定)满足了。

我该怎么做?

我到现在为止尝试的是

<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)

1 个答案:

答案 0 :(得分:0)

您需要创建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>