HTML DOM - spreading the string to multiple lines

Question

I'm currently trying to spread the string to multiple lines at HTML/JS. I'm using Repl.It (maybe it some bug/feature on this page) but I cannot spread it to multiple lines using "\\n". Please advise.

HTML div:

<div id="stats"> 
<script src="script.js"></script>
</div>

JS side:

function send_stats(message) {
  document.querySelector("#stats").innerHTML = message;
}

send_stats("Stats:\nPlayer hp:" + player_hp + "\nMonster hp:" + monster_hp")

Answer 1

You should use <br> instead of \\n . And use Template Strings rather than using + again and again.

 let monster_hp = 100.00 let player_hp = 90.00 function send_stats(message) { document.querySelector("#stats").innerHTML = message; } send_stats(`Stats:<br>Player hp:${player_hp}<br>Monster hp:${monster_hp}`) 

 <div id="stats"> <script src="script.js"></script> </div> 

Answer 2

Use .innerText instead of innerHTML

 var playerHp = 1; var monsterHp = 30; var msg = "Stats:\\nPlayer hp: " + playerHp + "\\nMonster hp: " + monsterHp; function sendStats(sel, msg) { document.querySelector(sel).innerText = msg; } sendStats('#stats', msg); 

 <output id='stats'></output>