My array contains a blank space [" "]. When I .join the space with underscores, the space element in the resulting string is not visible in the 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>Many spaces are in HTML rendered as a single space, as all other whitespace. To overcome this problem, you could use a nonbreaking space , which gives the wanted space.
function newGame() {
temp = myArray.join(" ").replace(/\s/g, ' ');
hiddenWord.innerHTML = temp;
}
var myArray = ["_", "_"," ","_","_"],
hiddenWord = document.getElementById('myid'),
temp;
newGame();
console.log("temp variable", temp);
console.log(myArray);<p id="myid"></p>Instead of joining using space(' '), Use nbsp of html
temp = myArray.join(" ");