2015-02-24 3 views
6

У меня есть некоторые проблемы с вычислением некоторых вещей с помощью JS и получением правильных значений из полей ввода (числа). Когда я использую этот код, он ничего не показывает. Так что же случилось с моим JS? Нужно ли включать файл JQuery?Получить значение входного числа с помощью JS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
</head> 
<body> 
     <form id="frm1" action="Calculate.html"> 
      <table width="350px" border="1px"> 
       <tr> 
        <th colspan="2">Availability</th> 
       </tr>  
       <tr> 
        <td>Total Production Time</td> 
        <td><input type="number" name="TotalProductionTime" placeholder=""> hours</td> 
       </tr> 
       <tr> 
        <td>Breaks</td> 
        <td><input type="number" name="Breaks" placeholder=""> minutes</td> 
       </tr> 
       <tr> 
        <td>Malfunctions</td> 
        <td><input type="number" name="Malfunctions" placeholder=""> minutes</td> 
       </tr> 
       <tr> 
        <td>Theoretical production time:</td> 
        <td><p id="test"></p></td> 
       </tr> 
      </table> 

<input type="button" onclick="Calculate()" name="Calculate" value="calculate"> 
<script> 
    function Calculate() 
    { 
     var TotalProductionTime = document.getElementById("TotalProductionTime").value; 
     var TotalProductionTimeInMinutes = TotalProductionTime * 60; 
     var Breaks = document.getElementById("Breaks").value; 
     var Malfunctions = document.getElementById("Malfunctions").value; 
     var TheoreticalProductionTime = TotalProductionTimeInMinutes - Breaks - Malfunctions;  

     document.getElementById("test").innerHTML = TheoreticalProductionTime; 
    } 
</script> 

</body> 
</html> 

Заранее спасибо.

+1

'.value' возвращает строку. Используйте 'parseInt (x, 10)' или 'parseFloat'. –

+2

вы используете 'getElementById', и у вас нет идентификатора. –

+0

Возможный дубликат [Получить значение с JS, когда он содержит нечисловые символы] (http://stackoverflow.com/questions/15627341/get-value-of-input-type-number -with-js-when-it-contains-non-numeric-characte) –

ответ

9

У вас были некоторые ошибки в вашем HTML-коде, но вот рабочая скрипка: Fiddle Вы пытаетесь получить элементы по их идентификатору, но вы не даете им идентификатор, который вы даете им Имя. Также прекратите использовать встроенные javascript-вызовы, это плохая практика.

<form id="frm1" action="Calculate.html"> 
    <table width="350px" border="1px"> 
     <tr> 
      <th colspan="2">Availability</th> 
     </tr> 
     <tr> 
      <td>Total Production Time</td> 
      <td> 
       <input type="number" id="TotalProductionTime" placeholder="">hours</td> 
     </tr> 
     <tr> 
      <td>Breaks</td> 
      <td> 
       <input type="number" id="Breaks" placeholder="">minutes</td> 
     </tr> 
     <tr> 
      <td>Malfunctions</td> 
      <td> 
       <input type="number" id="Malfunctions" placeholder="">minutes</td> 
     </tr> 
     <tr> 
      <td>Theoretical production time:</td> 
      <td> 
       <p id="test"></p> 
      </td> 
     </tr> 
    </table> 
    <input type="button" onclick="Calculate()" value="calculate"> 

JS:

function Calculate() { 
     var TotalProductionTime = document.getElementById("TotalProductionTime").value; 
     var TotalProductionTimeInMinutes = TotalProductionTime * 60; 
     var Breaks = document.getElementById("Breaks").value; 
     var Malfunctions = document.getElementById("Malfunctions").value; 
     var TheoreticalProductionTime = TotalProductionTimeInMinutes - Breaks - Malfunctions; 

     document.getElementById("test").innerHTML = TheoreticalProductionTime; 
    } 
+0

Спасибо, что вы изменили? : x aahhwww nvm Я вижу это сейчас. Нет ID-набора, как сказал Йерко Пальма. Мой бог: x – Bart

+0

«Имя» кнопки должно отличаться от функции «onclick» или в вашем случае я оставил бы ее ('name'). Также, если вы хотите, чтобы элементы по идентификатору, дайте им идентификатор, а не имя. – Michelangelo

2

У вас есть две проблемы здесь. Одно из очевидных заключается в том, что вы пытаетесь получить ссылку на входные данные формы на id, но не дали их (вы дали им name). Чтобы исправить, либо изменить атрибут name к id, или используйте форму конкретного способа ссылаться на них, например:

var TotalProductionTime = document.forms.frm1.TotalProductionTime 

Вторая проблема более порочная и имеет отношение объема исполнения, что вы положили в onclick атрибутов. Видишь ли, ваша кнопка называется «Рассчитать» так же, как и ваша функция, и в контексте атрибута onclick ее родительская форма используется для разрешения идентификаторов перед глобальной областью. Поэтому вместо вызова функции с именем Calculate вы пытаетесь вызвать кнопку самостоятельно. Fix, что, давая им разные имена, ссылки window.Calculate явно, или намного лучше, определить свой обработчик событий в JavaScript, а не с помощью атрибута HTML:

document.forms.frm1.Calculate.onclick=Calculate 
1

Каждый идентификатор должен быть преобразован в целое число. Пример

var Malfunctions = parseInt(document.getElementById("Malfunctions").value); 

тогда вы готовы пойти

Смежные вопросы