JavaScript 和 HTML 元素操作

Question

项目概念：创建一个“考试工具”，教师可以访问它来创建并让学生能够访问它来参加。将包括许多功能，但为了让手头的问题保持简单，我不会包括所有信息。

前端：使用 php 文件将数据库中的所有问题列出到 HTML 中的选择字段中。选择该项目后，将其添加到测试中。显示测试，并为每个问题分配分数。

我的实际问题/帮助：我的 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>

示例输出问题图片： enter image description here

Answer 1

问题是您每次都将数组附加到节点元素。所以，每次它都会输出旧值和新值

你不必把它做成一个数组，因为它没有数组就堆叠起来，

你只需要替换这个：

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

用这个：

 var textnode = document.createTextNode(addingquestion);

Answer 2

在这里，你需要每次都创建你的 LI，它是一个对象。

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>