在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個輸入值

回答

相關問題