проблема с добавлением строк на страницу динамически с помощью цикла for

Question

Я хочу добавить три предложения на страницу динамически, используя для l oop. Проблема заключается в том, что все предложения в массиве Sentences l ie друг на друга выводятся вместо каждого предложения в новой строке.

Код на данный момент:

let Sentences = [

'i was sent to earth to protect you.',

'they have been working around here.',

'just another example sentence.',

];


generateSentences();

function generateSentences() {

    for(let i = 0; i < Sentences.length; i++){

      let addSentence = document.getElementById(`Sentence${i}`);

      let sentence = '';
      sentence = `<span>${Sentences[i]}</span>`;
      addSentence.innerHTML = `${sentence}`;

    } // end of for loop
 
};

.container {
    position: absolute;
    overflow: hidden;
    left: 8.7vw;
    top: 25vh;
    height: 55vh;
    width: 82vw;   
    outline: 0.1vw dashed orange;
}

.main-class {
    position: absolute;
    white-space: pre-wrap; 
    font-family: 'Open Sans', sans-serif;  
    font-weight:400;
    color: #595959;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Sentence-class1 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 40;
}


.Sentence-class2 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 20;
}

.Sentence-class3 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

<div class="containerAnswering"> 

<div id="Sentence0" class="main-class Sentence-class1"></div>
<div id="Sentence1" class="main-class Sentence-class2"></div>
<div id="Sentence2" class="main-class Sentence-class3"></div>

</div>

Answer 1

Основная проблема, с которой вы столкнулись, заключается в том, что вы не указали единицы для своих css «нижних» свойств, таких как px, rem, et c. Все, кроме 0, потребует явного указания единицы измерения, в зависимости от браузера. Например:

.Sentence-class1 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 40px;
}

Я также хочу отметить, что класс вашего элемента контейнера - "containerAnswering" в HTML, а просто "контейнер" в CSS. Если, возможно, вы не ссылались на другой элемент, не показанный здесь ... но просто подумал, что я должен указать это на всякий случай.

Answer 2

Вам не нужно центрировать все три предложения div, так как они будут накладываться друг на друга. Вместо этого вы используете что-то вроде ниже.

Кроме того, это поможет использовать flex-direction: column, если вы хотите, чтобы каждое предложение отображалось одно под другим.

Также, если вам нужно расстояние между предложениями Вы можете определить класс, такой как sentence и использовать CSS margin, чтобы добавить интервал.

let Sentences = [

'i was sent to earth to protect you.',

'they have been working around here.',

'just another example sentence.',

];


generateSentences();

function generateSentences() {

    for(let i = 0; i < Sentences.length; i++){

      let addSentence = document.getElementById(`Sentence${i}`);

      let sentence = '';
      sentence = `<span>${Sentences[i]}</span>`;
      addSentence.innerHTML = `${sentence}`;

    } // end of for loop
 
};

.container {
    position: absolute;
    overflow: hidden;
    left: 8.7vw;
    top: 25vh;
    height: 55vh;
    width: 82vw;   
    outline: 0.1vw dashed orange;
}

.main-class {
    position: absolute;
    white-space: pre-wrap; 
    font-family: 'Open Sans', sans-serif;  
    font-weight:400;
    color: #595959;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sentence {
  margin: 8px 0;
}

<div class="containerAnswering"> 

<div class="main-class">
  <div id="Sentence0" class="sentence"></div>
  <div id="Sentence1" class="sentence"></div>
  <div id="Sentence2" class="sentence"></div>
</div>
</div>