заполнить поле ввода с помощью javascript проблемы

Question

Спасибо за ответы .. Я ставлю живую версию кода .., чтобы узнать, поможет ли это решить эту проблему. Именно здесь:

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

Я обновил следующий код, чтобы отразить то, что было предложено в ответ .. однако это просто возвращает ноль

У меня возникли проблемы оборачивать вокруг моей головы создавая простое уравнение в Java-script. То, что я пытаюсь достичь, состоит в том, чтобы иметь 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 является строкой, и это может вызвать проблемы при суммировании, поскольку если вы используете оператор 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>