how do i break lines in js? <br> and "\n" don't work-CodePudding

result variable won't break lines in playRound function. i tried <br and "\n" but it won't work. Can someone explain me why?. I want it to look like this:

You win! rock beats scissors
Player Score: 1
Computer Score: 0

no matter what i try i end up with:

You win! rock beats scissors Player Score: 1 Computer Score: 0

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';
      break;
    case 1:
      return 'paper';
      break;
    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!`  
      ` Player Score:`  
      playerScore  
      ` Computer Score:`  
      computerScore;
  } else if (
    (playerSelection === 'rock' && computerSelection === 'scissors') ||
    (playerSelection === 'paper' && computerSelection === 'rock') ||
    (playerSelection === 'scissors' && computerSelection === 'paper')
  ) {
    playerScore  ;
    result =
      `You win! ${playerSelection} beats ${computerSelection}`  
      'Player Score:'  
      playerScore  
      ' Computer Score: '  
      computerScore;
    if (playerScore === 5) {
      result = `You won the game!`;
      btnDisable();
    }
  } else if (
    (playerSelection === 'paper' && computerSelection === 'scissors') ||
    (playerSelection === 'rock' && computerSelection === 'paper') ||
    (playerSelection === 'scissors' && computerSelection === 'rock')
  ) {
    computerScore  ;
    result =
      `You lost! ${computerSelection} beats ${playerSelection}`  
      ' Player Score:'  
      playerScore  
      ' Computer Score: '  
      computerScore;
    if (computerScore === 5) {
      result = `Game Over`;
      btnDisable();
    }
  }
  document.getElementById('result').textContent = result;
  return;
};

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script
      src="script.js"
      defer
    ></script>
    <title>Rock Paper Scissors</title>
  </head>
  <body>
    <section id="buttons-container">
      <button type="button" value="rock">Rock</button>
      <button type="button" value="paper">Paper</button>
      <button type="button" value="scissors">Scissors</button>
    </section>
    <div id="result"></div>
  </body>
</html>

CodePudding user response：

textContent ignores multiline breaks. You can use innerText - which is sensitive to formatting - instead. Here's some documentation on the differences between them.

If you're using template strings you don't need to use string concatenation as well.

const playerScore = 10;
const computerScore = 20;

const result = `
  It's a draw!\n
  Player Score: ${playerScore}\n
  Computer Score: ${computerScore}
`;

document.body.innerText = result;

CodePudding user response：

To use <br> tags you need to use the innerHTML property.

To use \n you have to set the white-space: pre; rule in CSS.

element1.innerHTML = "a<br>b";
element2.textContent = "a\nb"

#element2 {
  white-space: pre;
}

<div id="element1">
</div>
<div id="element2">
</div>