Javascript for 循環 innerhtml 不起作用

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>

我創建了這個系統，它制作了一個數組，其中包含用戶在輸入字段中填寫的信息。 輸入字段是動態生成的，因此我使用 for 循環在最終創建數組的 innerHTML 中顯示它們。

我的代碼：

            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 (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);
            }

問題在於第二個循環。 每當我為一個問題創建 3 個輸入字段並生成 innerHTML 代碼時，它都會向我顯示所有 3 個輸入字段，除了它們都是第一個輸入字段而第二個和第三個未使用，如下面的屏幕截圖所示：問題如果我將 i 更改為 y：問題 2

（我的 FiddleJS 鏈接）： https://jsfiddle.net/thijsl0705/1s98gumk/1/

Answer 1

我輸入 a,b,c 然后添加答案，d,e 然后點擊加號並添加 f,g,h,i,j 然后創建數組。 然后點擊加號並添加 1,2,3,4,5 並創建數組並得到：

讓測驗 = [

讓測驗 = [

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

]

]

究竟是什么問題？ 你想讓我做什么？ 看起來您可能缺少每個新 QuizPart 的結尾 )