在javascript中划分2个输入值

我正在尝试构建一个计算平均工资的表单。非常简单的计算需要x/y = z。我希望它自动完成，不需要提交表单。这是迄今为止，我已经接近，但我要将代码插入到Weebly网站，并且无法读取它。任何帮助将大量赞赏！在javascript中划分2个输入值

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script type="text/javascript"> 
 
function calculate(output1) 
 
{ 
 
    var result = (input1/input2); 
 
    document.getElementById("output1").value = result; 
 
} 
 
</script> 
 

 
<style type="text/css"> 
 
body     { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;} 
 
.container    
 
input     { border:1px solid #eee; } 
 
.container p label  { width:180px; float:left; } 
 
p      { clear:both; } 
 
</style> 
 
</head> 
 
<body> 
 

 
<form name="day calculator" method="post" action=""> 
 
<div class="container"> 
 
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" name="input1" value=""/></p> 
 
    <p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p> 
 
    <p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p> 
 
</div> 
 
</form> 
 

 

 
</body> 
 
</html>

来源

2017-06-01 winterbrow

https://www.w3schools.com/jsref/dom_obj_event.asp在这里你可以找到所有的事件。我会在两个输入上使用onChange。 – bracco23

谢谢，我已经添加了这个，现在没有错误信息，但仍然没有完成。我想知道这个问题是否在脚本部分？ – winterbrow

确定。这里有很多问题。首先，你的javascript指的是HTML元素，而不是它的价值。您需要将ID添加到输入，并确保您将值转换为数字。

这可能帮助：

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function calculate() 
{ 
    var input1Val = Number(document.getElementById("input1").value); 
    var input2Val = Number(document.getElementById("input2").value); 
    var result = (input1Val/input2Val); 
    document.getElementById("output1").value = result; 
} 
</script> 

<style type="text/css"> 
body     { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;} 
.container    
input     { border:1px solid #eee; } 
.container p label  { width:180px; float:left; } 
p      { clear:both; } 
</style> 
</head> 
<body> 

<form name="day calculator" method="post" action=""> 
<div class="container"> 
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p> 
    <p><font color="black"><b><label>Days Worked : </label></b><input type="number" id="input2" name="input2" value=""/></p> 
    <p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p> 
    <input type="button" value="Go!" onclick="calculate()"> 
</div> 
</form> 


</body> 
</html>

来源

2017-06-01 21:55:30 Simon

非常感谢。甚至还添加了一个Go按钮。我认为这个ID是我没有遇到的，但现在有很多意义。再次感谢你！ – winterbrow

下面的代码将正常工作。您必须注意区别以了解代码中的问题。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script type="text/javascript"> 
 
function calculate(input2) 
 
{ 
 
\t var input1 = document.getElementById("input1").value; 
 
    var result = (input1/input2); 
 
    document.getElementById("output1").value = result; 
 
} 
 
</script> 
 

 
<style type="text/css"> 
 
body     { font-family:Cambria; font-size:18px; line-height:28px; margin:0; padding:0;} 
 
.container    
 
input     { border:1px solid #eee; } 
 
.container p label  { width:180px; float:left; } 
 
p      { clear:both; } 
 
</style> 
 
</head> 
 
<body> 
 

 
<form name="day calculator" method="post" action=""> 
 
<div class="container"> 
 
<p><font color="black"><b><label>Weekly Pay : </label></b><input type="number" id="input1" name="input1" value=""/></p> 
 
    <p><font color="black"><b><label>Days Worked : </label></b><input type="number" name="input2" value="" onBlur="calculate(this.value);"/></p> 
 
    <p><font color="red"><b><label>Average Pay : </label><input type="number" name="output1" id="output1"></b></p> 
 
</div> 
 
</form> 
 
</body> 
 
</html>

来源

2017-06-01 22:35:32 Zico

在javascript中划分2个输入值

回答

相关问题