函数和其他如果

Question

我对 JavaScript 还很陌生，需要在一个仅用于实践的小项目上指出正确的方向。

如果我没有错误地发布，非常抱歉，这是我在堆栈溢出上的第一篇文章，任何帮助都值得赞赏。

I've tried accomplishing my goal a few different ways and haven't gotten there. 
attack.addEventListener("click", function(){
hit();
});
function hit(){
    if (bossHealth.textContent > 0 && playerFocus.textContent >=2) {
        playerFocus.textContent -= 2;
        bossHealth.textContent -= 3; 
        console.log("attack");
    }
    else if (bossHealth.textContent >= 0 && playerFocus.textContent < 2){
        alert("Attack costs 2 focus, try regenerating this turn to gain focus and health!");
    }
};
strong.addEventListener("click", function(){
    bigHit();
});
function bigHit(){
    if(bossHealth.textContent > 0 && playerFocus.textContent >= 5){
    playerFocus.textContent -= 6;
    bossHealth.textContent -= 6;
    console.log("strong attack");
    }
    else if (playerFocus <5){
        alert("Strong attack costs 5 focus, if you do not have enough focus try regenerating for a turn");
    }
    else (bossHealth.textContent <= 0){
    bossHealth.textContent = "Dead";
    alert("You've killed the bad guy and saved the world!!!");
    }
};
easy.addEventListener("click", function(){
    reset();
});
function reset(){
    playerHealth.textContent = 10;
    playerFocus.textContent = 10;
    bossHealth.textContent = 10;
};
hard.addEventListener("click", function(){
    hardMode();
});
function hardMode(){
    playerHealth.textContent = 10;
    playerFocus.textContent = 10;
    bossHealth.textContent = 15;
};

使用函数命中，我在我的 else if 语句中没有收到警报

使用函数 bigHit，我也没有收到 else if 语句的警报，并且 else 语句的任何部分都不起作用。

减法也适用于我的函数，但是当尝试添加另一个使用加法的函数时，它会将数字添加到字符串的末尾而不是执行数学

Answer 1

你真的不应该依赖 DOM 中的内容来进行逻辑。您应该尝试使用局部变量，然后根据这些变量更新 DOM。

var boss = {}
var player = {}
function reset(){
    player.health = 10;
    player.focus = 10;
    boss.health = 10;
    update()
};
function hit(){
  if (boss.health > 0 && player.focus >=2) {
      player.focus -= 2;
      boss.health -= 3; 
      console.log("attack");
  } else if (boss.health > 0 && player.focus < 2){
      alert("Attack costs 2 focus, try regenerating this turn to gain focus and health!");
  }
  update()
}
function update() {
    playerFocus.textContent = player.focus
    playerHealth.textContent = player.health
    bossHealth.textContent = boss.health
}

您的问题是由textContent自动将数字转换为字符串引起的，通过使用您自己的变量管理数据，这不会影响代码的逻辑。

或者，您可以使用new Number(playerFocus.textContent)、parseFloat(playerFocus.textContent)或+playerFocus.textContent将字符串解析为数字，但您的代码将很快变得非常难以阅读。

希望这足以帮助您对代码进行更多编辑。

Answer 2

看起来你的playerFocus变量是一个 DOM 节点？基于该假设，您的条件缺少对其textContent的检查：

if (bossHealth.textContent > 0 && playerFocus.textContent >= 5){
   // ...
}
else if (playerFocus.textContent <5){
    // ...

在 JavaScript 中，else块不能有条件，所以如果你想有条件地检查bossHealth.textContent <= 0在bigHit函数的末尾，你需要将其更改为else if (bossHealth.textContent <= 0) { ... }块。

Answer 3

我正在添加到@LoganMurphy的评论和我自己的评论中。为了使用bossHealth的值，它需要一个整数。将代码更改为如下所示：

function hit(){
    if (parseInt(bossHealth.textContent) > 0 && parseInt(playerFocus.textContent) >=2) {
        playerFocus.textContent -= 2;
        bossHealth.textContent -= 3; 
        console.log("attack");
    }
    else if (parseInt(bossHealth.textContent) >= 0 && parseInt(playerFocus.textContent) < 2){
        alert("Attack costs 2 focus, try regenerating this turn to gain focus and health!");
    }
};

https://www.w3schools.com/jsref/jsref_parseint.asp