從JavaScript中的提示驗證用戶輸入

Question

因此，我從Codecademy擴展了rock / paper / scissors JS游戲以驗證用戶輸入，但是當用戶插入“ rock”，“ paper”以外的其他內容時，我無法讓程序繼續要求正確的用戶輸入。或“剪刀”。

var userChoice;

userChoice = prompt('Do you choose rock, paper, or scissors?');
console.log('User choice: ' + userChoice);

if (userChoice !== 'rock' && userChoice !== 'paper' && userChoice !== 'scissors') {
    userChoice = prompt('Select again.');
} else if (userChoice === computerChoice) {
    userChoice = prompt('It\'s a tie! Pick again.');
    console.log('New user choice: ' + userChoice);
}

//computer random choice
var computerChoice = Math.random();
console.log('Computer random number: ' + computerChoice);

// assign rock, paper, scissors values
if (computerChoice <= 0.33) {
    computerChoice = 'rock';
} else if (computerChoice <= 0.67) {
    computerChoice = 'paper';
} else {
    computerChoice = 'scissors';
}

console.log('Computer choice: ' + computerChoice);

// compare user and computer choices
var compare = function(choice1, choice2) {
    if (choice1 === 'rock') {
        if (choice2 === 'scissors') {
            return 'Rock wins!';
        } else {
            return 'Paper wins!';
        }
    } else if (choice1 === 'scissors') {
        if (choice2 === 'rock') {
            return 'Rock wins!';
        } else {
            return 'Scissors win!';
        }
    } else if (choice1 === 'paper') {
        if (choice2 === 'rock') {
            return 'Paper wins!';
        } else {
            return 'Scissors win!';
        }
    }
};

console.log(compare(userChoice, computerChoice));

第一次用戶在提示符下輸入類似'r'的命令時，此方法工作正常，但如果第二次輸入錯誤，則該命令不起作用，並且控制台在最后一行console上undefined日志console.log(compare(userChoice, computerChoice)); 我如何獲得它以繼續請求有效輸入？ 在此先感謝大家！

Answer 1

您的代碼有一些問題。 要解決第一個問題，您可以這樣做：

var userChoice;

userChoice = prompt('Do you choose rock, paper, or scissors?');
console.log('User choice: ' + userChoice);

while (userChoice !== 'rock' && userChoice !== 'paper' && userChoice !== 'scissors') {
    userChoice = prompt('Select again.');
} 

但是，第二部分仍然存在問題：

if (userChoice === computerChoice) {
    userChoice = prompt('It\'s a tie! Pick again.');
    console.log('New user choice: ' + userChoice);
}

此代碼將永遠不會觸發，因為您在進行比較后會計算出computerChoice 。 您應該將此代碼移到您的compare函數中：

var compare = function(choice1, choice2) {
    if (choice1 === choice2) {
        return 'It\'s a tie!';
    } else if (choice1 === 'rock') {
        if (choice2 === 'scissors') {
            return 'Rock wins!';
        } else {
            return 'Paper wins!';
        }
    } else if (choice1 === 'scissors') {
        if (choice2 === 'rock') {
            return 'Rock wins!';
        } else {
            return 'Scissors win!';
        }
    } else if (choice1 === 'paper') {
        if (choice2 === 'rock') {
            return 'Paper wins!';
        } else {
            return 'Scissors win!';
        }
    }
};

Answer 2

運行userChoice = prompt('Select again.'); ，您只需繼續完成其余的代碼執行即可。 您需要某種循環條件，檢查它們是否輸入了有效輸入，並讓代碼僅在有效后才繼續。 （提示：“ while ”循環）

嘗試以下方法：

//to do
// after it is a tie, making the same choice doesn't do anything?
// keep on prompting if incorrect input again

// take user input
var userChoice;

userChoice = prompt('Do you choose rock, paper, or scissors?');
console.log('User choice: ' + userChoice);

var valid = false;

//computer random choice
var computerChoice = Math.random();
console.log('Computer random number: ' + computerChoice);

// assign rock, paper, scissors values
if (computerChoice <= 0.33) {
    computerChoice = 'rock';
} else if (computerChoice <= 0.67) {
    computerChoice = 'paper';
} else {
    computerChoice = 'scissors';
}

while (!valid) {
    if (userChoice !== 'rock' && userChoice !== 'paper' && userChoice !== 'scissors') {
        userChoice = prompt('Select again.');
    } else if (userChoice === computerChoice) {
        userChoice = prompt('It\'s a tie! Pick again.');
        //computer random choice
        var computerChoice = Math.random();
        console.log('Computer random number: ' + computerChoice);

        // assign rock, paper, scissors values
        if (computerChoice <= 0.33) {
            computerChoice = 'rock';
        } else if (computerChoice <= 0.67) {
            computerChoice = 'paper';
        } else {
            computerChoice = 'scissors';
        }
        console.log('New user choice: ' + userChoice);
    } else {
     valid = true;
    }
}


console.log('Computer choice: ' + computerChoice);

// compare user and computer choices
var compare = function(choice1, choice2) {
    if (choice1 === 'rock') {
        if (choice2 === 'scissors') {
            return 'Rock wins!';
        } else {
            return 'Paper wins!';
        }
    } else if (choice1 === 'scissors') {
        if (choice2 === 'rock') {
            return 'Rock wins!';
        } else {
            return 'Scissors win!';
        }
    } else if (choice1 === 'paper') {
        if (choice2 === 'rock') {
            return 'Paper wins!';
        } else {
            return 'Scissors win!';
        }
    }
};

console.log(compare(userChoice, computerChoice));

Answer 3

它不起作用，控制台日志未定義

問題是，您在功能compare()中缺少return語句：

var compare = function(choice1, choice2) {
    if {
      ...
    }
    return "oops !!"; //<-- missing
};

我如何獲得它以繼續請求有效輸入？

使用循環可以幫助您。 可能做..while循環。