I am coding a Tic Tac Toe Program In Which I Have To Switch Between Two Player Turns (Player #1 | Player #2). When displaying the turns I use the arrow unicode symbol: &#8594. Whenever I change the text content of this turn display I can't add back the unicode symbol.

const turnDisplay = document.querySelector('#turnDisplay');

turnDisplay.textContent = '(Player #2 &#8594 Turn)'

Original Tic Tac Toe

Tic Tac Toe After Turn Display Change

How do I reassign a unicode variable through text content?

CodePudding user response：

Use can use the innerHTML property like this -

const turnDisplay = document.querySelector('#turnDisplay');

turnDisplay.innerHTML = 'Player #2 &#8594 Turn';

<p id="turnDisplay"></p>

CodePudding user response：

turnDisplay.textContent = '(Player #2 &#8594 Turn)' //here &#8594 is a html rightarrow unicode . to get that you have to use dollar($) symbol and the total strings should be enclosed in a tilde(`) symbol instead of apostrophe(')

turnDisplay.textContent = `(Player #2 ${&#8594} Turn)`