2012-02-13 35 views
0

おはよう、皆様>BMI計算機... BMIが表示されない以外

私は現在、単純なBMI計算機のコードを完成させようとしています。問題は、ブラウザで身長と体重を入力してもBMIの読みが表示されないことです。私は自分のHTMLが堅実であることを99%確信しています、それは問題を引き起こしているようなジャバスクリプトです。私がこの問題に取り組むことができるすべての入力は高く評価されます。ありがとう!

<!DOCTYPE HTML> 
<html> 
<head> 
<title>BMI Calculator</title> 
<script type="text/javascript"> 
/* <![CDATA[ */ 
function calculate() { 

var height = document.getElementById("height"); 
var weight = document.getElementById("weight") * 703; 
var denom = Math.pow(height, 2); 
var totalbmi = weight/denom; 
var bmi = document.getElementById("bmi"); 
if (isFinite(bmi)) {   
    bmi.innerHTML = totalbmi.toFixed(2); 
} 
} 
/* ]]> */ 
</script> 
<style type="text/css"> 
<!-- 
.result {font-weight: bold; } 
--> 
</style> 
</head> 
<body> 
<form name="details"> 
<table> 
    <tr> 
    <td>Height<br /> 
     (in Inches)</td> 
     <td><input type="text" size="3" id="height"   onChange="calculate();"/></td> 
    </tr> 
    <tr> 
    <td>Weight<br /> 
     (in Pounds)</td> 
    <td><input type="text" size="3" id="weight" onChange="calculate();"/></td> 
    </tr> 
    <tr> 
    <td><input type="button" value="My BMI" onClick="calculate();"/></td> 
    </tr> 
    </table> 
</table> 
<table width="270"> 
    <tr> 
    <td width="104">Your BMI is:</td> 
    <td width="154"><input type="text" id="totalbmi"></span></td> 
    </tr> 
</table> 
</form> 
</body> 
</html> 
+1

JS部分のデバッグを試しましたか? – simchona

答えて

2

HTMLノード、ないそれ内のテキストを返しますdocument.getElementById()var bmi = document.getElementById("totalbmi");

2

あるべきときにvar bmi = document.getElementById("bmi"); を持っているので、何かを更新するつもりはありません。ユーザーが提供する実際の重量と高さの値を取得するには、document.getElementById("height").valueを使用する必要があります。

nathanjosiahも同様に指摘しているように、おそらく "totalbmi"を意味する "bmi"ノードを指しています。あなたはまた、あなたの 'bmi'と 'totalbmi' 変数を混乱させるでしょう。

function calculate() { 
    var height = document.getElementById("height").value; 
    var weight = document.getElementById("weight").value * 703; 
    var denom = Math.pow(height, 2); 
    var totalbmi = weight/denom; 

    var bmi = document.getElementById("totalbmi"); 
    if (isFinite(totalbmi)) {   
    bmi.value = totalbmi.toFixed(2); 
    } 
} 

EDIT:他の人が指摘したように、あなたはその表示内容を変更するために入力の.VALUEを設定します。 <input>の要素はemptyなので、.innerHTMLプロパティの設定は機能しません。次の行で

+0

それはそれを働かせました。本当にありがとう! :3 –

0

あなたはidがtotalbmiですが、あなたは

bmi.value = totalbmi.toFixed(2)

の代わり

を行うだろう入力の値を設定するために、また document.getElementById("bmi");

<input type="text" id="totalbmi"> 

を使用しています

bmi.innerHTML = totalbmi.toFixed(2)

1

document.getElementById()は、その値ではなく(一致する)DOM要素自体への参照を返します。値を取得/設定するには、.valueプロパティを使用します。

また、実際のフィールドのIDが「totalbmi」で、代わりにそのフィールドの.innerHTML(入力要素がない)を設定しようとすると、idが「bmi」のフィールドに結果を設定しようとしていますその.value

ので、アカウントにこれらの問題を取っ:

function calculate() {  
    var height = document.getElementById("height").value; 
    var weight = document.getElementById("weight").value * 703; 
    var denom = Math.pow(height, 2); 
    var totalbmi = weight/denom; 
    document.getElementById("totalbmi").value = 
       isFinite(totalbmi) ? totalbmi.toFixed(2) : ""; 
} 

(。結果は私が空の文字列に出力フィールドを設定するのではなく前にそれにあったどのような値残しているisFiniteテストに失敗した場合にどこ)

関連する問題