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>

我将上述代码用于健康栏＆＃39;在一个我正在研究的小项目中。我很满意它，因为它的健康状况会上升/下降。唯一的问题是，出于某种原因，alert("It's already full!");和alert("Your critter has died! Oh no!");部分在它们应该发生时不会发生......但每次alert("You give your critter some food!");都会触发。

我做错了什么？

Answer 1

结合声明if (healthval === 1)＆amp;当您检查相同变量的条件时，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

虽然答案已被接受，但我尝试找到解决方案时有一些乐趣，所以我只是重新创建了整个内容，简化了它，创建了一个反馈函数（摆脱alert），并添加了a＆＃39;杀了我＆＃39;按钮。：）

以下是我的想法（感谢@vikrant singh提供的代码片段＆＃39;标记）：

＆＃13;

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);
    });
});

＆＃13;

<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>

＆＃13;

以下是小提琴链接，您可以根据自己的喜好进行编辑：http://jsfiddle.net/uruws5ov/1/

JavaScript警报不会触发

2 个答案: