2014-04-13 36 views
2

我正在開發一個健身應用程序,我想通過量具來表示BMI,但沒有得到如何動態更改量具的值,第二個問題是當我將量具腳本放在按鈕上時點擊它給我錯誤「沒有元素與ID:」衡量「發現!」。任何人都可以解決我的兩個問題,因爲我是新來的JS。所以啓迪我,糾正我。動態地更改量具的值

<html> 
<head> 
<script src="raphael.2.1.0.min.js"></script> 
<script src="justgage.1.0.1.min.js"></script> 

<script type="text/javascript"> 
function funky() 
{ 
    var weight=document.getElementById("weight"); 
    var height=document.getElementById("height"); 
    var heightDouble=height.value*height.value; 
    var bmi=weight.value/heightDouble; 
    document.getElementById("bmi").innerHTML=bmi; 
    cc(); 
} 
</script> 
</head> 
<body> 
<input type="text" id="weight"/> 
<input type="text" id="height"/> 
<input type="button" id="calculate" onClick="funky()"/> 
<div id="bmi"></id> 
<div id="gauge"></div> 

      <script> 
      function cc() 
      {    
var g = new JustGage({ 
id: "gauge",   
value: 10, 
min: 0, 
max: 100, 
title: "Visitors" 
}); 
} 
</script> 

</body> 
</html> 

回答

2

你會想修復你的體重指數計算和添加單位(磅對公斤,與釐米的),因爲我越來越低於零的數字。無論如何,我寫了一個新的計算(只是增加重量和高度)來演示如何更新計量器:由於腳本相對於div元素的排序方式,最有可能得到「計量器未找到」的錯誤。

請參閱This JSFiddle demo

<script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script> 
<script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script> 
<body> 
    <input type="text" id="weight" /> 
    <input type="text" id="height" /> 
    <input type="button" id="calculate" onClick="funky()" value="calculate" /> 
    <div id="bmi"></div> 
    <div id="gauge" class="200x160px"></div> 
    <script> 
     function funky() { 
      var weight = document.getElementById("weight"); 
      var height = document.getElementById("height"); 
      var heightDouble = height.value * height.value; 
      var bmi = weight.value/heightDouble; 
      document.getElementById("bmi").innerHTML = bmi; 
      //cc(); 
      var weightPlusHeight = parseInt(weight.value) + parseInt(height.value); 
      g.refresh(weightPlusHeight); 
     } 

     var g = new JustGage({ 
      id: "gauge", 
      value: 0, 
      min: 0, 
      max: 200, 
      title: "BMI" 
     }); 
    </script> 
</body> 
+0

感謝的人的幫助,它的工作。 – foxt7ot

+0

@YaseenKhan請點擊勾號接受答案。 –