JavaScript提醒不會觸發

Question

JS

var health = document.getElementById("health") 

    $(document).ready(function(){ 
     $('.heal').click(function(){ 
       var healthval = +document.getElementById('health').getAttribute('value') 
       console.log(healthval) 
       if (healthval === 1) { 
        alert("It's already full!"); 
       } else { 
        document.getElementById('health').setAttribute('value', healthval + 0.1); 
        alert("You give your critter some food!"); 
       }  
       if (healthval > 1) { 
        healthval = 1; 
       } 
       if (healthval === 0) { 
        alert("Your critter has died! Oh no!"); 
       } 
      }); 
    }); 

HTML

<meter low=".5" optimum=".8" high=".7" id="health" value="0.1"></meter> 
<button type="button" class="heal">Heal Me</button> 

我使用上面的代碼，在 '健康吧'我正在研究一個小項目。 我對此很滿意，因爲它的健康是按照它應有的上/下來的。只是由於某種原因，alert("It's already full!");和alert("Your critter has died! Oh no!");部件不應該發生，因爲它們應該是......但每次都會觸發alert("You give your critter some food!");。

我在做什麼錯？

Answer 1

聯合聲明if (healthval === 1) & if (healthval > 1)，更好地利用if else block而不是僅僅if blocks在同一個變量，當你正在檢查的條件。

嘗試這個 -

var health = document.getElementById("health") 
 

 
$(document).ready(function() { 
 
    $('.heal').click(function() { 
 
     var healthval = document.getElementById('health').getAttribute('value') * 1; 
 
     if (healthval >= 1) { 
 
      alert("It's already full!"); 
 
     } else if (healthval === 0) { 
 
      alert("Your critter has died! Oh no!"); 
 
     } else {    
 
      document.getElementById('health').setAttribute('value', healthval + 0.1); 
 
      console.log(healthval) 
 
      alert("You give your critter some food!"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<meter low=".5" optimum=".8" high=".7" id="health" value="0.1"></meter> 
 
<button type="button" class="heal">Heal Me</button>

Answer 2

雖然答案已被接受，我有一些有趣的嘗試，以找到一個解決辦法，所以我只是重新整件事，簡化IT，創造了一個功能的反饋（擺脫alert），並添加了「殺我」按鈕。 :)

這裏是我想出了（感謝@vikrant辛格的「代碼段」標記）：

healthval = $("#health").val(); 
 
function feedback(healthval) {  
 
    if (healthval >= 1) { 
 
     $('#msg').text("It's already full!"); 
 
    } else if (healthval === 0) { 
 
     $('#msg').text("Your critter has died! Oh no!"); 
 
    } else { 
 
     $('#msg').text("You give your critter some food!"); 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    $('.heal').click(function() { 
 
     healthval = $("#health").val(); 
 
     $("#health").val(healthval + 0.1); 
 
     console.log(healthval); 
 
     feedback(healthval); 
 
    }); 
 
    $('.kill').click(function() { 
 
     healthval = $("#health").val(); 
 
     $("#health").val(healthval - 0.1); 
 
     console.log(healthval); 
 
     feedback(healthval); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<meter low=".5" optimum=".8" high=".7" id="health" value="0.1"></meter> 
 
<button type="button" class="heal">Heal Me</button> 
 
<button type="button" class="kill">Kill Me</button> 
 
<div id="msg"></div>

這裏是小提琴鏈接，以便您可以爲自己編輯享受：http://jsfiddle.net/uruws5ov/1/