JavaScript函数返回-如何处理未定义的函数

Question

我在前端学习。我开始为Rock Paper Scissors项目创建javascript端，使用console.log而不是将结果应用于HTML。我创建了带有3个选项按钮的html，并创建了一个新的div来应用游戏结果(谁选择了什么，谁赢了(。我已经为播放器和电脑的选择添加了2段，但现在我有了这个功能，我有点卡住了。

这是js:

const buttons = document.querySelectorAll('.btn');
const resultsDiv = document.querySelector('.results');
const getComputerChoice = () => {
const options = ['rock', 'paper', 'scissors'];
const computerChoice = options[Math.floor(Math.random() * 3)];
return computerChoice;
};
const playRound = (playerSelection, computerSelection) => {
playerSelection = playerSelection.toLowerCase();
const playerChoiceMsg = document.createElement('p');
playerChoiceMsg.textContent = `You chose ${playerSelection}`
resultsDiv.appendChild(playerChoiceMsg);
const computerChoiceMsg = document.createElement('p');
computerChoiceMsg.textContent = `Computer chose ${computerSelection}`;
resultsDiv.appendChild(computerChoiceMsg)

if (playerSelection === 'rock') {
switch (computerSelection) {
case 'rock':
return 'Even! Try Again!';
case 'paper':
return 'You lose! Paper beats Rock!';
case 'scissors':
return 'You win! Scissors beats Rock!';
}
} else if (playerSelection === 'paper') {
switch (computerSelection) {
case 'rock':
return 'You win! Paper beats Rock!';
case 'paper':
return 'Even! Try Again!';
case 'scissors':
return 'You lose! Scissors beats Paper!';
}
} else {
// Player chose scissors
switch (computerSelection) {
case 'rock':
return 'You lose! Rock beats Scissors!';
case 'paper':
return 'You win! Scissors beats Paper!';
case 'scissors':
return 'Even! Try Again!';
}
}
};
buttons.forEach((button) => {
button.addEventListener('click', () => {
const playerSelection = button.textContent;
console.log(playRound(playerSelection, getComputerChoice()));
});
});

<div class="buttons">
<button class="btn btn-rock">Rock</button>
<button class="btn btn-paper">Paper</button>
<button class="btn btn-scissors">Scissors</button>
</div>
<div class="results">
</div>

在switch的情况下，我可以创建一个新的let来应用带有适当消息的结果(win，lose，even(，然后创建Element(p(来将其应用于resultsdiv。但是，如果我这样做，我会得到"；未定义的"；在DevTools中，因为函数不会返回任何内容。我知道函数并不总是必须返回，但它看起来并不专业；未定义的"；(如果在谷歌点击一个按钮后发生这种情况，你会怎么想？(消除未定义的最好方法是什么？我应该加上"；回归"到函数的末尾？

Answer 1

我知道函数并不总是必须返回。。。

它们不必有显式的返回语句。但是，他们总是回来。如果不包含return语句，则函数在执行后返回undefined。

。。。但看到"；未定义的"；(如果点击谷歌中的一个按钮后发生这种情况，你会怎么想？(

谁在乎？：-(搜索有效，对吧？

当然，在代码的公共构建中，将内容转储到控制台中通常被认为是一种糟糕的做法，但这只是一种与其他工具一样的工具。当你觉得有用的时候就用它。

清除未定义项的最佳方法是什么？我应该加上"；回归"到函数的末尾？

不，如果你尝试这个，你会发现你仍然得到undefined。如果您不想向控制台输出任何内容，请不要使用console.log()。替换此行：

console.log(playRound(playerSelection, getComputerChoice()));

有了这个：

playRound(playerSelection, getComputerChoice());