JavaScript函数返回undefined处理：石头剪刀布项目开发疑问

我正在开发石头剪刀布项目的JavaScript部分，最初用console.log输出结果，现在想把结果渲染到HTML里。已经做好了按钮和结果展示的HTML结构，但修改函数时遇到困惑：如果在switch分支里创建变量存储胜负信息，再用createElement('p')添加到结果div，playRound函数就没返回值，控制台会出现undefined。虽然函数不一定需要返回值，但不想看到这个不专业的输出，想知道最佳解决方案，是不是只要在函数末尾加return;就行？

现有代码 #

JavaScript代码

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

HTML代码

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

解决方案 #

这里有几个可行的方案，根据需求选择：

方案1：保留返回值，同时在函数内渲染结果

这个方案既能让console.log输出正常结果，又能把结果渲染到页面，兼顾实用性和扩展性：
修改playRound函数，先确定胜负文本，再创建元素添加到DOM，最后返回文本：

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

  let resultText;
  // 计算胜负结果
  if (playerSelection === 'rock') {
    switch (computerSelection) {
      case 'rock':
        resultText = 'Even! Try Again!';
        break;
      case 'paper':
        resultText = 'You lose! Paper beats Rock!';
        break;
      case 'scissors':
        resultText = 'You win! Scissors beats Rock!';
        break;
    }
  } else if (playerSelection === 'paper') {
    switch (computerSelection) {
      case 'rock':
        resultText = 'You win! Paper beats Rock!';
        break;
      case 'paper':
        resultText = 'Even! Try Again!';
        break;
      case 'scissors':
        resultText = 'You lose! Scissors beats Paper!';
        break;
    }
  } else {
    switch (computerSelection) {
      case 'rock':
        resultText = 'You lose! Rock beats Scissors!';
        break;
      case 'paper':
        resultText = 'You win! Scissors beats Paper!';
        break;
      case 'scissors':
        resultText = 'Even! Try Again!';
        break;
    }
  }

  // 渲染胜负结果
  const resultMsg = document.createElement('p');
  resultMsg.textContent = resultText;
  resultsDiv.appendChild(resultMsg);

  // 返回结果文本，避免console.log输出undefined
  return resultText;
};

方案2：明确返回空值，或移除console.log

如果不需要console.log输出结果，直接删掉事件监听里的console.log即可；如果保留console.log但不需要返回具体值，可以在函数末尾加return;，这样控制台会输出undefined但属于明确行为，不过更推荐方案1，因为保留返回值方便后续扩展（比如统计胜负次数）。

方案3：分离逻辑与渲染（模块化最佳实践）

把结果计算和DOM渲染分开，让playRound只负责计算胜负并返回结果，在事件监听里处理DOM渲染：

// 只负责计算胜负的函数
const playRound = (playerSelection, computerSelection) => {
  playerSelection = playerSelection.toLowerCase();
  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 {
    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.toLowerCase();
    const computerSelection = getComputerChoice();
    const result = playRound(playerSelection, computerSelection);

    // 渲染所有结果到DOM
    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);

    const resultMsg = document.createElement('p');
    resultMsg.textContent = result;
    resultsDiv.appendChild(resultMsg);

    console.log(result);
  });
});

这种方式让函数职责更单一，后续修改渲染逻辑或胜负计算逻辑时更灵活。

内容的提问来源于stack exchange，提问作者Aviran