Jquery BMI計算機が表示されない

BMI計算機を作成しようとしていて、BMI番号またはメッセージ出力をボックスに取り込めません。私は何かが不足しているか何かが間違っていることを知っているので、うまくいけば助けてもいい。ここに私のコードです：SOコミュニティへJquery BMI計算機が表示されない

が

<!DOCTYPE html> 
<html> 
    <head> 
     <title>BMI Calculator</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="bmi.js"></script> 
    </head> 

    <body> 
     <center> 
     <form id="bmi"> 
      What is your weight (lbs)? 
       <input class="calculations" type="text" name="weight" size="10" max="4"><br> 
      What is your height (in)? 
       <input class="calculations" type="text" name="height" size="10"><br> 

      <input type="submit" id="calculateBMI" name="verify" value="Calculate BMI"> 
      <p>Your BMI: 
       <input class="calculations" type="text" id="dopeBMI" size="10"> 
       <br>This Means: 
       <input class="calculations" type="text" id="meaning" size="25"> 
      </p> 
     </form> 
     </center> 
    </body> 
</html> 

$(document).ready(function(){ 
    $("bmi").click(function() { 
     var weight = $("weight").value; 
     var height = $("height").value; 
     if (weight > 0 && height > 0) { 
      var finalBmi = (weight/(height * height)) * 703; 
      $("dopeBMI") = finalBmi; 
      if (finalBmi < 18.5) { 
       $("meaning").value = "You are underweight."; 
      } 
      if (finalBmi > 18.5 && finalBmi < 24.9) { 
       $("meaning").value = "You are normal."; 
      } 
      if (finalBmi > 24.9 && finalBmi < 29.99) { 
       $("meaning").value = "You are overweight."; 
      } 
     } else { 
      $("meaning").value = "You are obese."; 
      } 
    }); 
});

出典

2017-03-28 Matt Zierer

ようこそ、あなたが:)

を学ぶことができるようにあなたは、それゆえ私はあなたのコードに欠けている点を強調するために、あなたの希望、jqueryのに慣れていないようです

1）Javascriptコードは "スクリプト" タグ

2の下で身体内に含まれるべきである）のjQueryのセレクタについてもっと勉強 -

3 $（ "＃BMI"） - 使用＃、idで要素を選択するには）フォームのように、クリックの代わりにsubmit関数を使用します。

4）e.preventDefault（）フォーム送信のデフォルトの動作を防ぐために

5）名前または任意の属性によって選択する要素 - $（ "[名= '重量']"）

6 ）、入力要素の値を取得すると同じヴァル（「今までにどのような値を」使用した入力要素に値を設定するのval（）関数

7）を使用）

への完全な実施例を見出すことができますここに。

$(document).ready(function(){ 
 
\t \t $("#bmi").submit(function(e) { 
 
\t \t \t e.preventDefault(); 
 
\t \t \t var weight = $("[name='weight']").val(); 
 
\t \t \t var height = $("[name='height']").val(); 
 
\t \t \t if (weight > 0 && height > 0) { 
 
\t \t \t \t var finalBmi = (weight/(height * height)) * 703; 
 
\t \t \t \t $("#dopeBMI").val(finalBmi); 
 
\t \t \t \t if (finalBmi < 18.5) { 
 
\t \t \t \t \t $("#meaning").val("You are underweight."); 
 
\t \t \t \t } 
 
\t \t \t \t if (finalBmi > 18.5 && finalBmi < 24.9) { 
 
\t \t \t \t \t $("#meaning").val("You are normal."); 
 
\t \t \t \t } 
 
\t \t \t \t if (finalBmi > 24.9 && finalBmi < 29.99) { 
 
\t \t \t \t \t $("#meaning").val("You are overweight."); 
 
\t \t \t \t } 
 
\t \t \t } else { 
 
\t \t \t \t $("#meaning").val("You are obese."); 
 
\t \t \t \t } 
 
\t \t }); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <center> 
 
     <form id="bmi"> 
 
      What is your weight (lbs)? 
 
       <input class="calculations" type="text" name="weight" size="10" max="4"><br> 
 
      What is your height (in)? 
 
       <input class="calculations" type="text" name="height" size="10"><br> 
 

 
      <input type="submit" id="calculateBMI" name="verify" value="Calculate BMI"> 
 
      <p>Your BMI: 
 
       <input class="calculations" type="text" id="dopeBMI" size="10" readonly> 
 
       <br>This Means: 
 
       <input class="calculations" type="text" id="meaning" size="25" readonly> 
 
      </p> 
 
     </form> 
 
     </center> 
 
    </body>

出典

2017-03-28 05:22:45

あなたの助けをありがとうございました！私はjqueryを初めて使っていて、それを学ぶために最善を尽くしていますが、少し前に学んだ簡単なことをやっていません。私は何が欠けていたのかを知るためにあなたのポイントに行きました。私が間違っていたことをよりよく理解しているように感じました。ありがとう！ –

Jquery BMI計算機が表示されない

答えて

関連する問題