Javascript Array Push для правильного хранения

Question

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

У меня есть один массив вне функции, который я хочу заполнить scores.

В моем for loop Я пытаюсь проверить, заполняется ли он, показывая array на документе, который работает правильно.

моя проблема: Когда я отправляю данные в php-файл и возвращаю содержимое обратно... scoreArray внезапно пуст.Я не могу понять, почему, поскольку он правильно отображается на HTML, но информация, полученная обратно из php-файла, пропала ... как будто я случайно очищаю массив после цикла for, что для меня не имеет смысла.

var testArray = [];
var scoreArray = [];

function examAdd() {
  var ajaxRequest = new XMLHttpRequest();
  ajaxRequest.onreadystatechange = function() {
    if (ajaxRequest.readyState == 4) {

      var ajaxDisplay = document.getElementById('ajaxDiv');
      var res = ajaxRequest.innerHTML = this.responseText;
      var data = JSON.parse(res);
      alert(this.responseText);


      for (i = 1; i < 21; i++) {
        var theID = document.getElementById("q" + i).value;
        scoreArray.push(theID);
        document.getElementById("exam").innerHTML = "Question Array: " + testArray + " || Scores Array: " + scoreArray;
      }
    }
  }

  var topics = document.getElementById("qTopic").value;
  var keywords = document.getElementById("qKeyword").value;
  var testname = document.getElementById("eName").value;


  var myObj = {
    id: "addt",
    test: testArray,
    scores: scoreArray,
    topic: topics,
    keyword: keywords,
    tname: testname
  };
  var myJSON = JSON.stringify(myObj);
  var myJSON2 = JSON.stringify(scoreArray);
  ajaxRequest.open("POST", "examtest.php", true);
  //ajaxRequest.open("POST","https://web.njit.edu/~rtw3/CS490/betamiddle.php", true);
  ajaxRequest.send(myJSON);
}

<div id="testLayout">

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

</div>

<input type="text" name="eName" id="eName" placeholder="Enter Test Name"><br><br>
<div class="button">
  <input type="button" value="Create" onclick="examAdd();">
  <input type="button" value="Cancel" onclick="cancel();">
</div>

Answer 1

Это рабочий процесс, который вы показываете с этим кодом:

1. Пользователь вводит имя теста и нажимает [Создать] -> запускает examAdd()
2. examAdd() создаетОбъект XML и устанавливает обработчик readystate
3. examAdd() создает три переменные, содержащие значения для topics,keywords,testname
4. examAdd() создает и stringifies и литерал объекта myObj
5. examAdd() открывает запрос XHR
6. examAdd() отправляет данные
7. examAdd() получает и анализирует данные в readystate 4
8. examAdd()запускает цикл for, который помещает значение HTMLInputElement в scoreArray

Если это ваше намерение, scoreArray может быть пустым только при нескольких условиях.Подозреваемый здесь заключается в том, что элементы с идентификаторами от q1 до q20 не существуют в DOM, или если они это делают, они не являются HTMLInputElement s, и у них нет свойства value.

Чтобы проверить это, консоль записывает значение theID в цикл для проверки.