Javascript for loop innerhtml doesn't work

Question

    class GenerateArray {

        constructor() {
            this.arrayCode = document.getElementById('code');
            this.BaseCode = document.getElementById('preCode');
            this.startCode = document.getElementById('startC');
            this.endCode = document.getElementById('endC');
            this.question = "";
            this.prefix = "";
            this.description = "";
            this.answer = "";
            this.id = "";
            this.Name = "";
            this.answerDIV = "";
            this.count = 0;

        }

        generateQuestionPart() {

            this.question = document.createElement('input');
            this.question.setAttribute('type', 'text');
            this.question.id = 'question' + this.count;
            this.question.className = 'question';
            this.question.placeholder = 'What is the question?'

            this.prefix = document.createElement('input');
            this.prefix.setAttribute('type', 'text');
            this.prefix.className = 'prefix';
            this.prefix.id = 'prefix' + this.count;
            this.prefix.placeholder = 'The prefix of the question that belongs to the link'

            this.description = document.createElement('input');
            this.description.setAttribute('type', 'text');
            this.description.id = 'description' + this.count;
            this.description.className = 'description';
            this.description.placeholder = 'Add the description that is going to be in the info pop up';

            this.answerDIV = document.createElement('div');
            this.answerDIV.className = 'answerDIV' + this.count;
            this.answerDIV.id = 'AnswerDivId';

            this.answer = document.createElement('button');
            this.answer.setAttribute('type', 'button');
            this.answer.id = 'answer';
            this.answer.className = 'answerN' + this.count;
            this.answer.innerHTML = 'Add Answer';
            this.answer.onclick = function (e) {
                for (let i = 0; i < NewArray.count; i++) {
                    if (e.target.className.endsWith(i)) {
                        NewArray.id = document.createElement('input');
                        NewArray.id.setAttribute('type', 'text');
                        NewArray.id.id = 'id' + i;
                        NewArray.id.classList.add('id');
                        NewArray.id.placeholder = 'Add the ID of the answer';

                        NewArray.Name = document.createElement('input');
                        NewArray.Name.setAttribute('type', 'text');
                        NewArray.Name.id = 'Name' + i;
                        NewArray.Name.className = 'name';
                        NewArray.Name.placeholder = 'Add the text that is on the answer button';
                        // console.log(e.target.className);

                        document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.id);
                        document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.Name);
                    }
                }
            }


            document.getElementsByClassName('create')[0].appendChild(this.question);
            document.getElementsByClassName('create')[0].appendChild(this.prefix);
            document.getElementsByClassName('create')[0].appendChild(this.description);
            document.getElementsByClassName('create')[0].appendChild(this.answerDIV);
            document.getElementsByClassName('create')[0].appendChild(this.answer);
            this.count++;
            // console.log(NewArray.answer.length)
        }

        writeArray() {
            let basis = document.createElement('p');
            basis.innerHTML =
                "    class QuizPart {\n" +
                "        constructor(questionText, chosenAnswer, prefix, questionDescription) {\n" +
                "            this.questionText = questionText;\n" +
                "            this.chosenAnswer = chosenAnswer;\n" +
                "            this.prefix = prefix;\n" +
                "            this.questionDescription = questionDescription;\n" +
                "        }\n" +
                "    }\n" +
                "\n" +
                "    class ChosenAnswer {\n" +
                "        constructor(id, name) {\n" +
                "            this.id = id;\n" +
                "            this.name = name;\n" +
                "        }\n" +
                "    }";

            this.BaseCode.appendChild(basis);

            let startC = document.createElement('p');
            startC.innerHTML = "let Quiz = [";

            for (let i = 0; i < this.count; i++) {
                let code = document.createElement('p');

                let output = "new QuizPart('" + document.getElementById('question' + i).value + "', [";

                let answers = document.querySelectorAll("input#Name" + i)
                console.log(answers.length);

                for (let y = 0; y < answers.length; y++) {
                    output += "new ChosenAnswer('" + document.getElementById('id' + i).value + "', '" + document.getElementById('Name' + i).value + "'),"
                }

                output += "], '" + document.getElementById('prefix' + i).value + "',";
                output += "'" + document.getElementById('description' + i).value + "',";

                code.innerHTML = output;

                this.arrayCode.appendChild(code);
            }
            let endC = document.createElement('p');
            endC.innerHTML = "]"

            this.startCode.appendChild(startC);
            this.endCode.appendChild(endC);
            // console.log(this.count.length);
        }
    }

    NewArray = new GenerateArray();
    NewArray.generateQuestionPart();

body {
    margin: 0;
    padding: 0;
}
.container{
    height: 1000px;
    width: 800px;
    position: relative;
    margin-top: 5px;
    left: 50%;
    -ms-transform: translate(-50%, 5%);
    transform: translate(-50%, 5%);
}

.QPB{
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    background-color: orange;
    font-size: 40px;
}

.question{
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
}

#answer{
    width: 100px;
    height: 35px;
    margin-bottom: 50px;
}

.prefix{
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
}

.description{
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
}

.id{
    position: relative;
    width: 90%;
    height: 20px;
    margin-bottom: 10px;
    margin-left: 10%;
}

.name{
    position: relative;
    width: 90%;
    height: 20px;
    margin-bottom: 20px;
    margin-left: 10%;
}

.CreateArray{
    width: 100px;
    height: 35px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>Hoi</title>
</head>
<body>
<div class="container">
    <div class="create">
        <button id="QuestionPartBtn" class="QPB" type="button" onclick="NewArray.generateQuestionPart()">+</button>
    </div>
    <div class="result">
        <button id="CreateArray" class="CreateArray" type="button" onclick="NewArray.writeArray()">Create Array</button>
    </div>
    <div class="preCode" id="preCode"></div>
    <div class="startC" id="startC"></div>
    <div class="code" id="code"></div>
    <div class="endC" id="endC"></div>
</div>

I created this system that makes an array with information that a user fills in in input fields. The input fields are dynamically generated, so I use a for loop to show them all in an innerHTML that eventually creates the array.

My code:

            this.answerDIV = document.createElement('div');
            this.answerDIV.className = 'answerDIV' + this.count;
            this.answerDIV.id = 'AnswerDivId';

            this.answer = document.createElement('button');
            this.answer.setAttribute('type', 'button');
            this.answer.id = 'answer';
            this.answer.className = 'answerN' + this.count;
            this.answer.innerHTML = 'Add Answer';
            this.answer.onclick = function (e) {
                for (let i = 0; i < NewArray.count; i++) {
                    if (e.target.className.endsWith(i)) {
                        NewArray.id = document.createElement('input');
                        NewArray.id.setAttribute('type', 'text');
                        NewArray.id.id = 'id' + i;
                        NewArray.id.classList.add('id');
                        NewArray.id.placeholder = 'Add the ID of the answer';

                        NewArray.Name = document.createElement('input');
                        NewArray.Name.setAttribute('type', 'text');
                        NewArray.Name.id = 'Name' + i;
                        NewArray.Name.className = 'name';
                        NewArray.Name.placeholder = 'Add the text that is on the answer button';
                        // console.log(e.target.className);

                        document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.id);
                        document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.Name);
                    }
                }
            }

For loop:

            for (let i = 0; i < this.count; i++) {
                let code = document.createElement('p');

                let output = "new QuizPart('" + document.getElementById('question' + i).value + "', [";

                let answers = document.querySelectorAll("input#Name" + i)
                console.log(answers.length);

                for (let y = 0; y < answers.length; y++) {
                    output += "new ChosenAnswer('" + document.getElementById('id' + i).value + "', '" + document.getElementById('Name' + i).value + "'),"
                }

                output += "], '" + document.getElementById('prefix' + i).value + "',";
                output += "'" + document.getElementById('description' + i).value + "',";

                code.innerHTML = output;

                this.arrayCode.appendChild(code);
            }

The problem is with the second loop. Whenever I create 3 input fields for one question and I generate the innerHTML code it does show me all 3, except that they are all the first input field and the second and third aren't used as seen in the following screenshot:The problem if i change i to y: Problem 2

(My FiddleJS link):https://jsfiddle.net/thijsl0705/1s98gumk/1/

Answer 1

I entered a,b,c then add answer, d,e then hit the plus sign and add f,g,h,i,j then create array. then hit the plus sign and add 1,2,3,4,5 and create the array and get:

let Quiz = [

let Quiz = [

new QuizPart('a', [new ChosenAnswer('d', 'e'),], 'b','c',

new QuizPart('f', [new ChosenAnswer('i', 'j'),], 'g','h',

new QuizPart('a', [new ChosenAnswer('d', 'e'),], 'b','c',

new QuizPart('f', [new ChosenAnswer('i', 'j'),], 'g','h',

new QuizPart('1', [new ChosenAnswer('4', '5'),], '2','3',

]

]

what exactly is the problem? what do you want to do? Looks like you might be missing a closing ) for each new QuizPart