Question

正确的我尝试制作一个计算器类型的东西，并且对javascript没有任何了解，我需要两个输入字段和两个输出字段，计算公式为：

输入1：25000

输入2：30000

输出1：112500

输出2：142500

输出1 =输入1 * 4.5

输出2 =输入2 +输出1

我已经尝试过计算输出1没问题，但是在计算输出时我遇到了问题2.在我撕掉头发之前请帮助我。

Answer 1

我在jsFiddle（click here）上做了一个例子。这是非常简单的数学。只计算第一个输出，将其存储在变量中或从输出字段中读取它并再次使用它来计算第二个输出。

<强> HTML：

<fieldset>
    <legend>Input</legend>First input:
    <input type="text" id="txtFirstInput" />
    <br/>Second input:
    <input type="text" id="txtSecondInput" />
    <br/>
    <input type="button" id="btnCalculate" value="Calculate" />
</fieldset>
<fieldset>
    <legend>Output</legend>First output:
    <p id="pFirstOutput"></p>Second output:
    <p id="pSecondOutput"></p>
</fieldset>

<强>的jQuery

$(document).ready(function() {
    $("#btnCalculate").click(function () {
        var firstInput = $("#txtFirstInput").val();
        var firstOutput = firstInput * 4.5;
        var secondInput = $("#txtSecondInput").val();
        var secondOutput = parseInt(firstOutput) + parseInt(secondInput);
        $("#pFirstOutput").html(firstOutput);
        $("#pSecondOutput").html(secondOutput);
    });
});

<强>的Javascript

window.addEventListener("load", function() {
    document.getElementById("btnCalculateJS").addEventListener("click", function() {
                var firstInput = document.getElementById("txtFirstInput").value;
        var firstOutput = firstInput * 4.5;
        var secondInput = document.getElementById("txtSecondInput").value;
        var secondOutput = parseInt(firstOutput) + parseInt(secondInput);
        document.getElementById("pFirstOutput").innerHTML = firstOutput;
        document.getElementById("pSecondOutput").innerHTML = secondOutput;
    }, false);
}, false);

请记住，JS确实需要知道您正在使用数字。因此，在我的例子中，我使用的是'parseInt（）'函数，它指定了类型。

这是你想要的吗？或者你想要它与纯JS而不是jQuery？

Answer 2

使用简单的HTML和Javascript，您可以执行以下操作：

<强> HTML：

Input1 : <input type="text" id="input1" value="25000" />
Input2 : <input type="text" id="input2" value="30000" />
<button onClick="calculate();">Calculate</button>

Output1 : <input type="text" id="output1" />
Output2 : <input type="text" id="output2" />

<强>使用Javascript：

function calculate(){
    var input1Value = document.getElementById('input1').value;
    var input2Value = document.getElementById('input2').value;

    var output1 = parseInt(input1Value) * 4.5;
    document.getElementById('output1').value = output1;

     var output2 = parseInt(output1) + parseInt(input2Value);
    document.getElementById('output2').value = output2;    
}

DEMO

不是很容易吗？只涉及三个步骤：

创建一个方法，点击按钮调用它。
获取字段值并执行所需的操作。
将输出值设置回字段。

你应该从学习基础知识开始。

Answer 3

这项工作和小数值。

<html>
    <head>
        <script languages="javascript">
            function calculate() {
                var in_1 = document.getElementById('input_1');
                var in_2 = document.getElementById('input_2');
                var out_1 = document.getElementById('output_1');
                var out_2 = document.getElementById('output_2');

                var res_1 = Number(in_1.value) * 4.5;
                var res_2 = Number(in_2.value) + res_1;

                out_1.value = res_1;
                out_2.value = res_2;
            }
        </script>
    </head>
    <body>
        <label>Input 1:</label><input id="input_1"/>
        <label>Input 2:</label><input id="input_2"/>
        <button onClick="calculate()">Calculate</button>
        <hr/>
        <label>Output 1:</label><input id="output_1"/>
        <label>Output 2:</label><input id="output_2"/>
    </body>
</html>

如何在Javascript中添加带有输出的用户输入

3 个答案: