JavaScript and HTML element manipulation

Project Concept: Creating an “exam maker”, which can be accessed by a teacher to create and let a student be able to access it to take. Many features would be included but to keep it simple on the question at hand i wont be including all info.

Front End: List all questions in the database, using a php file, to a select field in HTML. When the item is selected add it to the test. Display the test, and assign scoring to each question.

My Actual Question/Help: My addq() function is supposed to, get the value of selected item, append it on the global testArray=[]; while the for loop iterates through each one to display them individually after each one is added.

The Problem: What mine is displaying in HTML… it keeps adding the arrays so the output is repeated over and over after each addq(). Please help fix it! — the array needs to be outside the function so I can access it later and send it off to a php file.

<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>

Example Output Issue Picture: enter image description here

Answer

the problem is that you’re appending the array every time to the node element. So, every time it will output the old values with the new ones

You don’t have to make it as an array because it stacks without an array,

you just need to replace this :

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

with this :

 var textnode = document.createTextNode(addingquestion);

Advertisement

Answer