Мой массив содержит пустое пространство [""]. Когда я присоединяюсь к пробелу с подчеркиванием, элемент пробела в результирующей строке не виден в HTML - PullRequest
Новая
       7

Мой массив содержит пустое пространство [""]. Когда я присоединяюсь к пробелу с подчеркиванием, элемент пробела в результирующей строке не виден в HTML

7 голосов
/ 15 июня 2019

При отображении в консоли результат, который я получаю между тегами p, содержит пробел в индексе 3, что является правильным.

Но при отображении на странице я получаю "_ _ _ _".Пробел в индексе 3 не виден.Вот CodePen .

Как получить расстояние между подчеркиванием для отображения на странице?Я не могу даже получить пространство для отображения здесь!Появляется вот так "_ _ _ _".Между подчеркиванием 2 и 3 должен быть пробел!

Большое спасибо!

.toString вместо .join не имеет значения.

.textContent вместо .innerHTML также не имеет значения. 

<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>

Ответы [ 4 ]

8 голосов
/ 15 июня 2019

Когда рендерит HTML, обычно последовательности пробелов сворачиваются в один пробел. Используйте white-space: pre; на элементе, чтобы сохранить последовательности пробелов: 

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>
4 голосов
/ 15 июня 2019

Многие пробелы в HTML отображаются как один пробел, как и все остальные пробелы.Чтобы преодолеть эту проблему, вы можете использовать неразрывный пробел &nbsp;, который дает требуемое пространство. 

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>
2 голосов
/ 15 июня 2019

Вместо объединения с использованием пробела ('') используйте nbsp из html 

temp = myArray.join("&nbsp;");
0 голосов
/ 15 июня 2019

это происходит потому, что html не учитывает два пробела, которые вы можете рассматривать как обрезанную строку в javascript

...