Question

我正在尝试构建一个可以计算平均工资的表单。非常简单的计算需要是x / y = z。我希望它能自动完成，而不需要提交表格。这是我到目前为止，我已经接近，但我将把代码插入Weebly网站，它无法读取它。任何帮助都会受到大力赞赏！

＆＃13;

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

＆＃13;

Answer 1

行。这里有很多问题。首先，你的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>

Answer 2

以下代码将有效。您必须注意区别以理解代码中的问题。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate(input2)
{
	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>

在javascript中划分2个输入值

2 个答案: