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>
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>
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
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/>');
});