Question

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

非常抱歉，如果我发帖不正确，这是我在Stack Overflow上发表的第一篇文章，感谢您的帮助。

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

点击功能后，我的if语句中没有警报

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

减法也可以在我的函数中使用，但是当尝试添加另一个以加法方式使用加法的函数时，它会将数字加到字符串的末尾而不是执行数学运算

Answer 1

看起来您的playerFocus变量是DOM节点？根据该假设，您的病情缺少其textContent的检查：

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

在JavaScript中，else块不能有条件，因此，如果要在bossHealth.textContent <= 0函数的末尾有条件地检查bigHit，则需要将其更改为{ {1}}阻止。

Answer 2

我要添加@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

Answer 3

您真的不应该依赖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将字符串解析为数字，但是您的代码将变得非常难以快速阅读。

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

函数和其他条件

3 个答案: