使用javascript问题填充输入字段

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属性，可以以这种方式访问​​元素。

另外看看我将输入值转换为数字（通过使用一元加运算符），因为value属性是字符串，并且在总结时会给你带来问题，因为如果你使用add运算符串将会发生。

检查上述示例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>