When displayed in the console, the result I get between the p tags contains the space in index 3, which is correct.
But when displayed on page I get "_ _ _ _". The space in index 3 is not visible. Here's the CodePen.
How can I get the space between the underscores to be displayed on the page? I CANT EVEN GET THE SPACE TO DISPLAY ON HERE! It shows up like this "_ _ _ _". There should be a space between underscore 2 and 3!
Thank you very much!
.toString instead of .join makes no difference.
.textContent instead of .innerHTML also makes no difference.
<html>
<p id="myid"></p>
<script>
var myArray = ["_", "_", " ", "_", "_"];
var hiddenWord = document.getElementById('myid');
var temp;
function newGame() {
temp = myArray.join(" ");
hiddenWord.innerHTML = temp;
}
newGame();
console.log("temp variable", temp);
console.log(myArray);
</script>
</html>
When the HTML is rendered, normally sequences of white space are collapsed to a single white space. Use white-space: pre;
on the element to preserve the Sequences of white spaces:
var myArray = ["_", "_", " ", "_", "_"];
var hiddenWord = document.getElementById('myid');
var temp;
function newGame() {
temp = myArray.join(" ");
hiddenWord.innerHTML = temp;
}
newGame();
#myid {
white-space: pre;
}
<p id="myid"></p>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With