Javascript数组推送正确存储答案

【问题标题】：Javascript Array Push to be Stored ProperlyJavascript数组推送正确存储
【发布时间】：2019-03-10 21:09:26
【问题描述】：

我的程序：使用选择选项和文本字段创建测试。每次添加问题以选择分数时，都会输入文本字段。

我在函数之外有一个数组，我想用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>

【问题讨论】：

如果您将数据发布到服务器，当页面响应首次加载时会重新创建scoreArray？ examAdd 中的每个 Ajax 请求将数据保存在服务器上的原因是什么？您没有应该发出的请求的 url。
当您发布请求时会发生什么，您的页面是否重新加载，您是否在控制台记录了任何变量？我建议您在 for 循环执行期间、发布之前和之后控制台日志 scoreArray。

标签： javascript html ajax loops for-loop

【解决方案1】：

这是您使用此代码显示的工作流程：

用户输入测试名称并按下[创建] --> 运行examAdd()
examAdd() 创建一个 XML 对象并设置一个 readystate 处理程序
examAdd() 为 topics,keywords,testname 创建了三个保存值的变量
examAdd() 创建和 stringifies 和对象字面量 myObj
examAdd() 打开 XHR 请求
examAdd()发送数据
examAdd() 接收并解析readystate 4 处的数据
examAdd() 运行一个 for 循环，将 HTMLInputElement 的值推入 scoreArray

如果这是您的意图，scoreArray 只能在少数情况下为空。这里的嫌疑人是 id 为 q1 到 q20 的元素在 DOM 上不存在，或者如果它们存在，它们不是 HTMLInputElements 并且它们没有 value 属性。

要对此进行测试，请控制台在循环中记录theID 的值以进行验证。

【讨论】：