Question

感谢您的回复..我把代码的实时版本..看看是否有助于解决这个问题。它在这里：

http://www.zacharydesigns.com/sandbox/calculatorJS.html

我更新了以下代码以反映作为答案提供的内容..但这只是返回零

我无法在javaScript中创建一个简单的方程式。我想要实现的是拥有a=(x/z)*y。

x = user input
z = total of all input
y = defined number (in this case 300)

我想出的是

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
function update()
{
    var a = $("#productOne").val(); // '#' identify IDs as in CSS
    var b = $("#productTwo").val();
    var c = $("#productThree").val();
    var productTotal = Math.floor(a/(a+b+c));
    $("#productTotal").val(productTotal); // Set calculated value in the HTML
}

</script>

<form name="calc" action="#">
    <table align="center" border="1">
        <tr>
                <td align="right">
                        Product One:
                </td>
                <td align="left">
                        <input type="text" name="productOne" id="productOne" size="5" /></td>
                <td align="right">
                        Product Two:
                </td>
                <td align="left">
                        <input type="text" name="productTwo" id="productTwo" size="5" /></td>
                <td align="right">
                        Product Three:
                </td>
                <td align="left">
                        <input type="text" name="productThree" id="productThree" size="5" /></td>
        </tr>
        <tr>
                <td colspan="2" align="center">
                        <input type="button" value="Calculate" onclick="update();return false;" />
                </td>
        </tr>
        <td align="right">
                Product Total:</td>
        <td align="left">
                <input type="text" name="productTotal" id="productTotal" size="6" readonly="readonly" /></td>
        </tr></table>
</form>

我不确定是否接近。有人可以帮我指导一下吗？

Answer 1

我发现你的脚本中有一些不起作用的东西：

未使用year变量且表单中没有year输入。
a，b和c变量声明，我认为您希望从输入元素中获取值。
您将计算分配给productTotal变量，稍后使用未定义的theProductTotal变量。

要按name获取表单元素，我建议你这样：

function update() {
  var a = +document.forms['calc'].elements['productOne'].value,
      b = +document.forms['calc'].elements['productTwo'].value,
      c = +document.forms['calc'].elements['productThree'].value,
      productTotal = Math.floor(a/(a+b+c)*300);

  document.forms['calc'].elements['productTotal'].value = productTotal;

  return false;
}

注意我是如何获取输入值的，因为您只使用name属性，您可以通过这种方式访问元素。

另外看我正在将输入值转换为Number（通过使用一元加运算符），因为value属性是字符串，并且当你求和时可能会给你带来问题，因为如果你使用使用字符串添加运算符将发生串联。

检查上面的示例here。

Answer 2

使用JQuery工作代码将是：

<script type="text/javascript">

function update() {

var a = parseInt($("#productOne")val()); // '#' identify IDs as in CSS
var b = parseInt($("#productTwo").val());
var c = parseInt($("#productThree").val());
var productTotal = Math.floor(a/(a+b+c)*300);


$("#productTotal").attr("value",productTotal); // Set calculated value in the HTML

} 
</script> 

<form name="calc" action="#">

<table align="center"
border="1"><tr><td align="right">Product One: </td>
<td align="left"><input type="text" name="productOne" id="productOne" size="5" />
</td>
<td align="right">Product Two: </td>
<td align="left"><input type="text" name="productTwo" id="productTwo" size="5" />
</td>
<td align="right">Product Three: </td>
<td align="left"><input type="text" name="productThree" id="productThree" size="5" />
</td>
</tr><tr><td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update();return false;" /> </td></tr>

<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal" id="productTotal" size="6"
readonly="readonly" /></td></tr>
</table></form>

希望我没有错过任何东西。

Answer 3

改为使用.val（）。

<script type="text/javascript">
function update()
{
    var a = parseInt($("#productOne").val()); // '#' identify IDs as in CSS
    var b = parseInt($("#productTwo").val());
    var c = parseInt($("#productThree").val());
    var productTotal = Math.floor(a/(a+b+c)*300);
    $("#productTotal").val(productTotal); // Set calculated value in the HTML
}

</script>

<form name="calc" action="#">
    <table align="center" border="1">
        <tr>
            <td align="right">
                Product One:
            </td>
            <td align="left">
                <input type="text" name="productOne" id="productOne" size="5" /></td>
            <td align="right">
                Product Two:
            </td>
            <td align="left">
                <input type="text" name="productTwo" id="productTwo" size="5" /></td>
            <td align="right">
                Product Three:
            </td>
            <td align="left">
                <input type="text" name="productThree" id="productThree" size="5" /></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" value="Calculate" onclick="update();return false;" />
            </td>
        </tr>
        <td align="right">
            Product Total:</td>
        <td align="left">
            <input type="text" name="productTotal" id="productTotal" size="6" readonly="readonly" /></td>
        </tr></table>
</form>

使用javascript问题填充输入字段

3 个答案: