如何在Javascript中添加用户输入和输出

-2

右键我正在试图制作一个计算器类型的东西，并且没有JavaScript知识，我需要两个输入字段和两个输出字段，计算公式为：如何在Javascript中添加用户输入和输出

输入1：25000

输入2：30000

输出1：112500

输出2：142500

输出1 =输入1 * 4.5

输出2 =输入2 + 1输出

我试过，计算输出1是正常的，但我来的问题计算输出2时，请帮帮我在我拔掉头发之前。

来源

2015-05-14 Louis Down

请分享您的代码 –

你说你的JavaScript的零知识：这是一个可以在此时建议你：http://www.w3schools.com/js/ – CodeWithCoffee

_but我来的问题当**计算**输出2_时。输出2的问题是什么，其简单的数学，不是吗？ – Zee

使用简单的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

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

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

您应该从基础知识入手。

来源

2015-05-14 10:34:10

@Louis Down，试试这个纯JavaScript的。 –

根据您的要求定制您的领域。 –

完成了！感谢Parkash，非常有帮助。下次我会做更多的研究，并试图发展我的知识。 –

我在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？

来源

2015-05-14 10:30:51 Jorrex

嗨Jorrex，这正是我所需要的只是我认为我需要它是纯粹的JS。 –

我改变了我的小提琴;）现在它有jQuery和JS方法。 – Jorrex

这项工作和十进制值。

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

来源

2015-05-14 10:35:40

如何在Javascript中添加用户输入和输出

回答

相关问题