I have an issue with breaking lines in javascript html

Question

I have an issue with breaking line in javascript. It doen't make a break line in html page, how can i fix this?

 let currentDate; var botHp; var playerHp; const postlog = function(message) { document.querySelector(".gamelogchat").textContent += message; }; document.querySelector(".cardbutton").addEventListener("click", function() { console.log("click"); currentDate = new Date(); let Time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds(); postlog(Time + "\\r\\n"); });

 <div class="gamelog"> <h1 class="gamename">Game</h1> <p class="gamelogname">Game log</p> <div class="gamelogbox"> <p class="gamelogchat"></p> </div> </div>

Answer 1

Try to change on

 document.querySelector(".gamelogchat").innerHTML += message + "<br />";

Mb, it's better to understand with demo: https://codesandbox.io/s/trusting-phoebe-9zl3h?file=/src/index.js

Answer 2

Just use this:

let currentDate;  
var botHp;  
var playerHp;  

const postlog=function(message)
{
  document.querySelector('.gamelogchat').textContent+=message;
};

document.querySelector('.cardbutton').addEventListener('click',function()
{
  console.log('click');
  currentDate=new Date();
  let Time=currentDate.getHours()+':'+currentDate.getMinutes()+':'+currentDate.getSeconds();    
  postlog(Time+'<br/>');
});

Answer 3

This should fix the problem:

 let currentDate; var botHp; var playerHp; const postlog = function(message) { document.querySelector(".gamelogchat").innerHTML += message; }; document.querySelector(".cardbutton").addEventListener("click", function() { console.log("click"); currentDate = new Date(); let Time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds(); postlog(Time + "<br>");//\\r\\n });

 <div class="gamelog"> <h1 class="gamename">Game</h1> <p class="gamelogname">Game log</p> <button class="cardbutton">Test Button</button> <div class="gamelogbox"> <p class="gamelogchat"></p> </div> </div>