用户使用Javascript输入后如何存储总积分？

Question

I'm coding my first JavaScript create your own adventure game. I have an input field for the user to enter his actions, a button to submit the action and an output text field for the story. When the button is clicked it starts a function to calculate the effectiveness of the user action.

Each action has a certain amount of points (25, 50, 75). If the user reaches 100 points after a few tries, he wins. If he reaches over 100 he loses. As long as 100 points aren't met, the user may keep on trying different actions.

The problem is that the function needs to store the current total points in a global variable, but it doesn't do that. After every button click the check function checks if the 100 points are met and gives hints to the user. But right now, it just says "You did it!" which is what it says when you meet 100 total points. What am I doing wrong?

I'm a total beginner at JavaScript, so I hope my code isn't a complete mess. Any help and advice is welcome. :)

Here is my HTML code:

<form>
<fieldset>
<label>Enter your answer here:</label>
<input id="userInput" type="text" name="userInput">
<input id="submit" type="button" name="submit" value="Click!" onclick="userAction()">
<textarea id="txtOutput" type="text" readonly="readonly" name="txtOutput">
</textarea>
</fieldset>

And my Javascript code:

var userInput = document.getElementById("userInput");
var txtOutput = document.getElementById("txtOutput");

txtOutput.value = "(\This is just a test and not the actual game.\) \n\nChoose your method to convince the merchant: \n\nA. compliment him on his work \nB. bribe him with money \nC. initmidate him \nD. blackmail him";

var totalPoints = 0;

function add(points) {
  totalPoints += points;
}

window.userAction = function() {
  var input = userInput.value.toUpperCase();
  var compliment = "A";
  var bribe = "B";
  var intimidate = "C";
  var blackmail = "D";

    if (input == compliment) {
        add(25);
    }
    else if (input == bribe) {
        add(25);
    }
    else if (input == intimidate) {
        add(50);
    }
    else if (input == blackmail) {
        add(75);
    }
    else {
        txtOutput = "Method not found. Choose either A, B, C or D.";
    }
    check();
}

    window.check = function() {
    if (totalPoints <= 25) {
        txtOutput.value = "You have his attention. Keep going.";
        userAction();
    }
    else if (totalPoints <= 50) {
        txtOutput.value = "It's working. Keep going. Don't push it too hard, though.";
        userAction();
    }
    else if (totalPoints <= 75) {
        txtOutput.value = "You almost convinced him. Be careful now!";
        userAction();
    }
    else if (totalPoints = 100) {
        txtOutput.value = "You did it!";
    }
    else if (totalPoints > 100) {
        txtOutput.value = "You pushed it too hard. The merchant runs away!";
    }
    else {
        txtOutput.value = "input not found.";
    }
}

The JSfiddle

Answer 1

So your problem is you are re-invoking userAction() & with your equality setting vs checking:

// Notice here you check `<=`
 else if (totalPoints <= 75) {
    txtOutput.value = "You almost convinced him. Be careful now!";
}
// Notice here you SET `=`, this should be `===`
// this will ALWAYS be true
else if (totalPoints = 100) {
    txtOutput.value = "You did it!";
}
// Notice here you check `>`
else if (totalPoints > 100) {
    txtOutput.value = "You pushed it too hard. The merchant runs away!";
}

See: https://jsfiddle.net/0mo7peoc/7/

Answer 2

Here is a solution

https://jsfiddle.net/exa2k8vq/1/

You had 2 errors:

1. else if (totalPoints = 100) while you need ==
2. you called userAction() in your if, so player got point twice

Answer 3

Remove your calls to UserAction from within window.check

it is calling the same action multiple times and hence you get you did it on first click

change this

window.check = function() {
    if (totalPoints <= 25) {
        txtOutput.value = "You have his attention. Keep going.";
        userAction();
    }
    else if (totalPoints <= 50) {
        txtOutput.value = "It's working. Keep going. Don't push it too hard, though.";
        userAction();
    }
    else if (totalPoints <= 75) {
        txtOutput.value = "You almost convinced him. Be careful now!";
        userAction();
    }
    else if (totalPoints == 100) {
        txtOutput.value = "You did it!";
    }
    else if (totalPoints > 100) {
        txtOutput.value = "You pushed it too hard. The merchant runs away!";
    }
    else {
        txtOutput.value = "input not found.";
    }

to this

    window.check = function() {
    if (totalPoints <= 25) {
        txtOutput.value = "You have his attention. Keep going.";

    }
    else if (totalPoints <= 50) {
        txtOutput.value = "It's working. Keep going. Don't push it too hard, though.";
    }
    else if (totalPoints <= 75) {
        txtOutput.value = "You almost convinced him. Be careful now!";

    }
    else if (totalPoints = 100) {
        txtOutput.value = "You did it!";
    }
    else if (totalPoints > 100) {
        txtOutput.value = "You pushed it too hard. The merchant runs away!";
    }
    else {
        txtOutput.value = "input not found.";
    }
}

here is a fiddle https://jsfiddle.net/0mo7peoc/15/

also change this line

else if (totalPoints = 100) {

to this

else if (totalPoints == 100) {

Answer 4

Only wrong condition is totalPoints = 100 change it to totalPoints == 100 . But the actual reason you are getting this behavior is your check method. In each of your condition, you are calling userAction method again and again. This is why you reach to the conclusion at once.

I have made the adjustment to your fiddle to fix this issue. See updated fiddle UPDATED FIDDLE

Update your check method to

window.check = function() {
    if (totalPoints <= 25) {
        txtOutput.value = "You have his attention. Keep going.";
    }
    else if (totalPoints <= 50) {
        txtOutput.value = "It's working. Keep going. Don't push it too hard, though.";
    }
    else if (totalPoints <= 75) {
        txtOutput.value = "You almost convinced him. Be careful now!";
    }
    else if (totalPoints == 100) {
        txtOutput.value = "You did it!";
    }
    else if (totalPoints > 100) {
        txtOutput.value = "You pushed it too hard. The merchant runs away!";
    }
    else {
        txtOutput.value = "input not found.";
    }

Note: I have removed calls to your userAction method from this method.

Answer 5

You simply mistyped equals operator, == .

...
else if (totalPoints == 100) { 
    txtOutput.value = "You did it!"; 
}