Манипулирование JavaScript и HTML-элементами

Question

Концепция проекта: создание «экзаменационной мастерской», к которой учитель может получить доступ, чтобы создать и позволить ученику получить доступ к нему для сдачи. Многие функции будут включены, но для простоты в данном вопросе я не буду включать всю информацию.

Front End: список всех вопросов в базе данных, используя файл php, в поле выбора в HTML. Когда элемент выбран, добавьте его в тест. Показать тест и назначить оценку для каждого вопроса.

My Actual Question / Help: Моя функция addq () должна получить значение выбранного элемента, добавить его в глобальный testArray = []; в то время как цикл for перебирает каждый из них, чтобы отобразить их отдельно после добавления каждого из них.

Проблема: что мое отображает в HTML ... он продолжает добавлять массивы, поэтому вывод повторяется снова и снова после каждого addq (). Пожалуйста, помогите исправить это! - массив должен быть вне функции, чтобы я мог получить к нему доступ позже и отправить его в файл php.

<h4><center>Test</center></h4>
 <ol id="test">
</ol>



<script>

var testArray= [];

function addq(){

     var addingquestion = document.getElementById('questionSelect').value;
     var myArray = testArray.push(addingquestion);
     var node = document.createElement("LI");

     for(i=0;i<20;i++){

     var textnode = document.createTextNode(testArray[i].toString());
     node.appendChild(textnode);
     document.getElementById("test").appendChild(node);
      }
    }
</script>

Пример выходного файла: введите описание изображения здесь

Answer 1

Здесь вам нужно каждый раз создавать свою ЛИ, это объект.

var testArray = [1,2,3,4,5,6,7,8,9,10];

function addq() {
  // REMOVED because not provided.
  //let addingquestion = document.getElementById('questionSelect').value;
  //let myArray = testArray.push(addingquestion);
  let test = document.querySelector('#test');

  testArray.forEach(t => {
    // create new li for each item.
    let li = document.createElement('li');
    let textnode = document.createTextNode(t);
    li.appendChild(textnode);
    test.appendChild(li);
  });
}

addq();

<h4>
  <center>Test</center>
</h4>
<ol id="test">
</ol>

Answer 2

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

Вам не нужно создавать его как массив, так как он складывается без массива,

, вам просто нужно заменить это:

 var textnode = document.createTextNode(testArray[i].toString());

с этим:

 var textnode = document.createTextNode(addingquestion);