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

Asked 15/6, 2019 at 8:26 Answered 15/6, 2019 at 8:35

Solved javascript html arrays join innerhtml

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>

Ambry answered 15/6, 2019 at 8:26 Comment(3)

I think you'll need to use a <pre> tag since HTML usually ignores extra whitespaces – Solitta 15/6, 2019 at 8:30

Possible duplicate of Concatenated white space does not display in result – Butyraceous 15/6, 2019 at 14:10

Thank you for the answers! I am going to go with " ", since it is more concise for my implementation. – Ambry 16/6, 2019 at 1:10

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, '&nbsp;');
    hiddenWord.innerHTML = temp;
 }

var myArray = ["_", "_"," ","_","_"],
    hiddenWord = document.getElementById('myid'),
    temp;

newGame();
console.log("temp variable", temp);
console.log(myArray);

<p id="myid"></p>

Aerobe answered 15/6, 2019 at 8:30 Comment(2)

What's the best practice ? To use   or white-space: pre; ? – Patriciate 15/6, 2019 at 8:32

i think, a website should be readable without css. it may be a matter of taste. – Aerobe 15/6, 2019 at 8:39

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>

Redingote answered 15/6, 2019 at 8:30 Comment(4)

Great answer. Didn't know that white-space: pre; existed. How would this be "better" or more useful than   ? – Patriciate 15/6, 2019 at 8:34

I'm not sure that's better or more useful. There are many cases in which you can solve a problem from JS / CSS / HTML perspective. In this case white-space: pre; is the CSS solution. – Redingote 15/6, 2019 at 8:37

When you can solve a problem by CSS property itself it's always better to do it with CSS, this is what it is designed for, Better or Worse: Styling with JavaScript vs CSS – Vitus 15/6, 2019 at 8:39

@CodeManiac I do agree in general with that post, however I do believe that there are some exceptions. In this case, this isn't really "styling issue" but more of a rendering issue when multiple white spaces exist. I would be more tempted to say that   solution would be "more" adapted. My personal opinion of course. – Patriciate 15/6, 2019 at 8:43

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, '&nbsp;');
    hiddenWord.innerHTML = temp;
 }

var myArray = ["_", "_"," ","_","_"],
    hiddenWord = document.getElementById('myid'),
    temp;

newGame();
console.log("temp variable", temp);
console.log(myArray);

<p id="myid"></p>

Aerobe answered 15/6, 2019 at 8:30 Comment(2)

What's the best practice ? To use   or white-space: pre; ? – Patriciate 15/6, 2019 at 8:32

i think, a website should be readable without css. it may be a matter of taste. – Aerobe 15/6, 2019 at 8:39

Instead of joining using space(' '), Use nbsp of html

temp = myArray.join("&nbsp;");

Elbertelberta answered 15/6, 2019 at 8:35 Comment(0)

this happens because html does not take in account two spaces you can think of it as a trimed string in javascript

Kantianism answered 15/6, 2019 at 8:33 Comment(3)

This is not an answer. Please remove it. – Patriciate 15/6, 2019 at 8:34

why should I. I just said what I know example conider doing this in js 'string ', its totallly fine here but if you put more than one space in html it gets ignored except if you use pre or speciffically use   – Kantianism 15/6, 2019 at 8:36

You haven't provided something that wasn't already said in a previous answer and you don't provide a solution to the problem. – Patriciate 15/6, 2019 at 8:37

Recommended topics

Hot tags