JS中playRound函数result变量无法换行问题求助

核心原因是你使用了textContent属性设置内容——这个属性会将所有内容视为纯文本，既不会解析HTML标签（比如<br>），也不会把\n转义字符渲染成换行，所以内容会挤在一起。

下面是两种可行的解决方案：

方案1：用innerHTML解析HTML换行标签 #

把设置内容的代码从textContent改成innerHTML，同时在拼接result时用<br>分隔不同行：

修改JavaScript中的这一行：

document.getElementById('result').innerHTML = result;

然后调整result的拼接逻辑，比如胜利场景：

result = `You win! ${playerSelection} beats ${computerSelection}<br>Player Score: ${playerScore}<br>Computer Score: ${computerScore}`;

平局和失败场景同理，把原来的空格连接换成<br>分隔。

方案2：保留textContent，用CSS实现换行 #

如果你不想用HTML标签，可以用\n作为换行符，然后给结果容器添加CSS样式让换行生效：

首先修改result的拼接，用\n分隔：

result = `You win! ${playerSelection} beats ${computerSelection}\nPlayer Score: ${playerScore}\nComputer Score: ${computerScore}`;

然后在style.css中添加：

#result {
  white-space: pre-line;
}

pre-line样式会保留换行符，同时自动合并多余的空格，排版更整洁。

完整修改后的示例代码（以方案1为例） #

let playerScore = 0;
let computerScore = 0;
let buttons = document.querySelectorAll('button');
let result = '';

// Computer choice
const getComputerChoice = () => {
  const randomNumber = Math.floor(Math.random() * 3);
  switch (randomNumber) {
    case 0:
      return 'rock';
    case 1:
      return 'paper';
    case 2:
      return 'scissors';
  }
};

function btnDisable() {
  buttons.forEach(el => {
    el.disabled = true;
  });
}

// deciding who wins
const playRound = function (playerSelection) {
  let computerSelection = getComputerChoice();
  if (playerSelection === computerSelection) {
    result = `It's a draw!<br>Player Score: ${playerScore}<br>Computer Score: ${computerScore}`;
  } else if (
    (playerSelection === 'rock' && computerSelection === 'scissors') ||
    (playerSelection === 'paper' && computerSelection === 'rock') ||
    (playerSelection === 'scissors' && computerSelection === 'paper')
  ) {
    playerScore++;
    if (playerScore === 5) {
      result = `You won the game!`;
      btnDisable();
    } else {
      result = `You win! ${playerSelection} beats ${computerSelection}<br>Player Score: ${playerScore}<br>Computer Score: ${computerScore}`;
    }
  } else {
    computerScore++;
    if (computerScore === 5) {
      result = `Game Over`;
      btnDisable();
    } else {
      result = `You lost! ${computerSelection} beats ${playerSelection}<br>Player Score: ${playerScore}<br>Computer Score: ${computerScore}`;
    }
  }
  document.getElementById('result').innerHTML = result;
};

buttons.forEach(button => {
  button.addEventListener('click', () => {
    playRound(button.value);
  });
});

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