如何在 JavaScript 中使用 if else 语句提示用户点击按钮以继续该语句？

Question

I have built a little project game and there is a combat system. The problem is if you hit attack it runs the if else statement all the way through but doesn't show everything. It also gives me a Not a Number error if you lose, and I can't figure out what to do. Do I need to change the order of statements or something like that?

setFightEvent: function() {
    let getArena = document.querySelector(".arena");  
    let getEnemy = document.querySelector(".enemy");
    let enemy00 = new Enemy("Goblin", 100, 0, 20, 50, 100, 100);
    let enemy01 = new Enemy("Troll", 200, 0, 40, 50, 80, 150);
    let chooseRandomEnemy= Math.floor(Math.random() * Math.floor(2));
    switch (chooseRandomEnemy) {
        case 0:
            enemy = enemy00;
            getArena.innerHTML = '<div><p>You are fighting a ' + enemy.enemyType + '<button class="btn-attack" onclick="EventManager.FightEvent()">Attack!</button></p></div>';
            break;
        case 1:
            enemy = enemy01;
            getArena.innerHTML = '<div><p>You are fighting a ' + enemy.enemyType + '<button class="btn-attack" onclick="EventManager.FightEvent()">Attack!</button></p></div>';
            break;
    }
    getEnemy.innerHTML = '<img src="img/avatar-enemy/' + enemy.enemyType.toLowerCase() + '.jpg" alt="' + enemy.enemyType + '" class="img-enemy"><div><h3 class="type-enemy">' + enemy.enemyType + '</h3><p class="health-enemy">Health: ' + enemy.health + '</p><p class="mana-enemy">Mana: ' + enemy.mana + '</P><p class="dexterity-enemy>Dexterity :' + enemy.dexterity + '</p></div>';
},
FightEvent: function() {
    let getEnemy = document.querySelector(".enemy");
    getEnemy.style.visibility = 'visible';
    let getArena = document.querySelector(".arena");
    let getPlayerHealth = document.querySelector(".health-player");
    let getEnemyHealth = document.querySelector(".health-enemy");
    let getPlayerGold = document.querySelector(".gold-player");
    let getPlayerDexterity = player.dexterity;
    let getEnemyDexterity = enemy.dexterity;
    let playerAttack = function () {
        let calcBaseDamage;
        if (player.mana > 0) {
            calcBaseDamage = player.strength * player.mana / 1000;
        } else {
            calcBaseDamage = player.strength * player.dexterity / 1000;
        }
        let offsetDamage = Math.floor(Math.random() * Math.floor(10));
        let calcOutputDamager = calcBaseDamage + offsetDamage;
        let numberOfHits = Math.floor(Math.random() * Math.floor(player.dexterity / 6) / 2) + 1 ;
        let attackValues = [calcOutputDamager, numberOfHits];
        return attackValues;
    }
    let enemyAttack = function () {
        let calcBaseDamage;
        if (enemy.mana > 0) {
            calcBaseDamage = enemy.strength * enemy.mana / 1000;
        } else {
            calcBaseDamage = enemy.strength * enemy.dexterity / 1000;
        }
        let offsetDamage = Math.floor(Math.random() * Math.floor(6))
        let calcOutputDamager = calcBaseDamage + offsetDamage;
        let numberOfHits = Math.floor(Math.random * Math.floor(enemy.dexterity / 6) / 2) + 1 ;
        let attackValues = [calcOutputDamager, numberOfHits];
        return attackValues;
    }
    if (getPlayerDexterity >= getEnemyDexterity) {
        let PlayerAttackValues = playerAttack();
        let totalDamage = PlayerAttackValues[0] * PlayerAttackValues[1];
        enemy.health = enemy.health - totalDamage;
        getArena.innerHTML = '<div><p>You hit the ' + enemy.enemyType + ' for ' + PlayerAttackValues[0] + ' damage ' + PlayerAttackValues[1] + ' times!</p></div>';
        if (enemy.health <= 0) {
            player.gold = player.gold + enemy.gold;
            player.xp = player.xp + enemy.xp;
            getArena.innerHTML = '<div<p>After a hard fought battle, you won. You also looted the ' + enemy.enemyType + ' and it had ' + enemy.gold + ' gold!<br>Gained ' + enemy.xp + ' XP!</p></div>';
            getPlayerGold.innerHTML = 'Gold: ' + player.gold;
            getPlayerHealth.innerHTML = 'Health: ' + player.health;
            getEnemyHealth.innerHTML = 'Health: 0';
         } else {
            let enemyAttackValues = enemyAttack();
            let totalDamage = enemyAttackValues[0] * enemyAttackValues[1];
            player.health = player.health - totalDamage;
            getArena.innerHTML = '<div><p>The ' + enemy.enemyType + ' hit you for ' + enemyAttackValues[0] + ' damage ' + enemyAttackValues[1] + ' times!</p></div>';
            getEnemyHealth.innerHTML = 'Health: ' + enemy.health;
            getPlayerHealth.innerHTML = 'Health: ' + player.health;
            if (player.health <= 0) {
                player.xp = player.xp + (enemy.xp / 2);
                getArena.innerHTML ='<div><p>After a gruelling battle, you lost. Maybe you should rest before fighting again.<br>Gained ' + enemy.xp + '!'
                getPlayerHealth.innerHTML = 'Health: 0';
                getEnemyHealth.innerHTML = 'Health: ' + enemy.health;
            } else {
                getPlayerHealth.innerHTML = 'Health: ' + player.health;
            }
         } 
        } else if (getEnemyDexterity >= getPlayerDexterity) {
            let enemyAttackValues = enemyAttack();
            let totalDamage = enemyAttackValues[0] * enemyAttackValues[1];
            player.health = player.health - totalDamage;
            getArena.innerHTML = '<div><p>The ' + enemy.enemyType + 'hit you for ' + enemyAttackValues[0] + ' damage ' + enemyAttackValues[1] + ' times!</p></div>';
            if (player.health <= 0) {
                player.xp = player.xp + (enemy.xp / 2);
                getArena.innerHTML ='<div><p>After a gruelling battle, you lost. Maybe you should rest before fighting again.<br>Gained ' + enemy.xp + '!'
                getPlayerHealth.innerHTML = 'Health: 0';
                getEnemyHealth.innerHTML = 'Health: ' + enemy.health; 
        } else {
            let PlayerAttackValues = playerAttack();
            let totalDamage = PlayerAttackValues[0] * PlayerAttackValues[1];
            enemy.health = enemy.health - totalDamage;
            getArena.innerHTML = '<div><p>You hit the ' + enemy.enemyType + ' for ' + PlayerAttackValues[0] + ' damage ' + PlayerAttackValues[1] + ' times!</p></div>';
            getPlayerHealth.innerHTML = 'Health: ' + player.health;
            if (enemy.health <= 0) {
                player.gold = player.gold + enemy.gold;
                player.xp = player.xp + enemy.xp;
                getArena.innerHTML = '<div<p>After a hard fought battle, you won. You also looted the ' + enemy.enemyType + ' and it had ' + enemy.gold + ' gold!<br>Gained ' + enemy.xp + ' XP!</p></div>';
                getPlayerGold.innerHTML = 'Gold: ' + player.gold;
                getPlayerHealth.innerHTML = 'Health: ' + player.health;
                getEnemyHealth.innerHTML = 'Health: 0';
                alert("Select another action before fighting again!");
            } else {
                getEnemyHealth.innerHTML = 'Health: ' + enemy.health;
            }

         }
        }



        },

the code seems to run fine unless you are going to lose, then it just breaks. I want to be able to say the first if else, then ask the user to hit a button before it continues. Like, if you don't kill them in one hit I would like it to show the updated health of the player and monster THEN run the if else statement again. I think the problem is if you dont OTK them it just dies. I hope that makes sense! ps. https://squarecylinder.github.io/Stress-of-The-Kingdom/ here is a link to the game, but I used absolute positioning in CSS to line everything up, so I don't think it would look right in every display! I'm trying to figure that out as well!

Answer 1

The comments have already addressed the fact that you're stating Math.random instead of calling Math.random() at one point in your code, so I'll leave that alone. Other than that, this line doesn't have a semicolon at the end:

getArena.innerHTML = '<div><p>After a gruelling battle, you lost. Maybe you should rest before fighting again.<br>Gained ' + enemy.xp + '!'

It occurs twice in the code. I haven't set up a running sample of the code, so I don't know if this is your only remaining issue. If it still doesn't work after making this update, let me know and I'll remove this answer.

---

Side note:

Your random statements are a little bit needlessly complex. For example, with this line:

Math.floor(Math.random() * Math.floor(10))

there's no need to floor 10 . 10 is already a flat integer. In fact, because you're using a lot of randomness, I'd use randojs.com to make all your randomness simpler and more readable. The line above can be written as just rando(0, 9) . If you choose to use randojs, all you have to do is add the following line to the head tag of your html document:

<script src="https://randojs.com/1.0.0.js"></script>