2013-08-27 1 views
2

Я новичок в Javascript, и я буду благодарен, если кто-нибудь поможет мне понять, что я делаю неправильно. Я пытаюсь вычислить площадь поверхности трапеции, получая значения из полей ввода. Когда я нажимаю кнопку «Рассчитать S», я получаю «Нан» в качестве ответа. Это основная часть HTML-кода:Получите числовые значения из полей ввода и используйте их для расчета площади поверхности трапеции

<form method="post"> 
    <label for="a">a</label> 
    <input type="text" id="a"/> <br/> 
    <label for="b">b</label> 
    <input type="text" id="b"/> <br/> 
    <label for="h">h</label> 
    <input type="text" id="h"/> <br/> 
    <button onclick="alert(S)">Calculate S</button> 
    </form> 

И это скрипт я использую, чтобы получить значения и вычислить поверхность:

  <script type="text/javascript"> 
      var a=parseInt(document.getElementById("a"), 10); 
      var b=parseInt(document.getElementById("b"), 10); 
      var h=parseInt(document.getElementById("h"), 10); 
      var S=parseInt(((a+b)/2)*h, 10); 
     </script> 

Спасибо заранее!

ответ

1
  1. Используйте свойство .value на входных элементах, чтобы получить их содержимое. затем позвоните по телефону parseInt по телефону , чтобы позвонить по номеру.
  2. Не нужно также parseInt.
    var S = ((a + b)/2) * h;
  3. Оберните код вызываемой функцией, если вы хотите, чтобы она была выполнена при нажатии кнопки (то, что вы сейчас выполнили, когда код был разобран вашим браузером).

Пример здесь: http://jsfiddle.net/bpwEh/

Обновленный код:

<head> 
    <!-- ... --> 
    <script> 
     function calc(){ 
      var a=parseInt(document.getElementById("a").value, 10); 
      var b=parseInt(document.getElementById("b").value, 10); 
      var h=parseInt(document.getElementById("h").value, 10); 
      return ((a+b)/2)*h, 10; 
     } 
    </script> 
</head> 
<body> 
    <form method="post"> 
     <label for="a">a</label> 
     <input type="text" id="a"/> <br/> 
     <label for="b">b</label> 
     <input type="text" id="b"/> <br/> 
     <label for="h">h</label> 
     <input type="text" id="h"/> <br/> 
     <button onclick="alert(calc()); return false;">Calculate S</button> 
    </form> 
</body> 
2

Вы должны получить значение из каждого входа, а не только вход, как это:

 <script type="text/javascript"> 
     var a=parseInt(document.getElementById("a").value, 10); 
     var b=parseInt(document.getElementById("b").value, 10); 
     var h=parseInt(document.getElementById("h").value, 10); 
     var S=((a+b)/2)*h; 
    </script> 
+0

+1 для устранения проблемы. Тем не менее, код должен быть в функции, вызываемой кнопкой, иначе он просто примет значения по умолчанию (пустые строки здесь) и проанализирует их (NaN), чтобы дать результат NaN. –

+0

@ Kolink, хорошая точка, слишком много проблем в одном вопросе для меня. :-) –