帶有多個答案選項的Javascript動態數組窗口

Question

我正在處理多個數組，併發生一個問題。 當我只有一個生成的問題div我可以沒有問題地添加額外的問題，但如果我添加另一個問題div，我不能添加額外的問題都不是兩個窗口（同樣適用於任何其他數字），錯誤是我得到的是newdiv [counterq]是未定義的。有人可以幫我解決這個問題嗎？謝謝！

此外，我怎樣才能移動div AddOption下面創建新的一個選項輸入？

我是編程新手，對不起，如果不能正確解釋。謝謝！

編輯：用新問題更新。不想創建單獨的主題。

HTML：

var counterq = 0; 
 
var limitq = 3; 
 
var countero = 0; 
 
var limito = 5; 
 

 
function AddContent(divName) { 
 
    countero = 0; 
 
    if (counterq == limitq) { 
 
    alert("You have reached the limit of adding " + counterq + " inputs"); 
 
    } else { 
 
    var newdiv = new Array() 
 
    newdiv[counterq] = document.createElement('div'); 
 
    newdiv[counterq].className = "ContentWindow[" + counterq + "]"; 
 
    newdiv[counterq].innerHTML = "<p class='ContentQuestion'>Question " + (counterq + 1) + " </p> <input type='text' class='AddQuestionInput' value='Type your question' name='myQuestion[" + counterq + "]'>"; 
 
    if (countero == limito) { 
 
     alert("You have reached the limit of adding " + countero + " options"); 
 
    } else { 
 
     newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 1) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + countero + "]'></div>"; 
 
     newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 2) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + (countero+1) + "]'></div>"; 
 
     document.getElementById(divName).appendChild(newdiv[counterq]); 
 
     countero += 2; 
 
     AddOption = function() { 
 
      var counterq = 0; 
 
      var limito = 5; 
 
      if (countero == limito) { 
 
       alert("You have reached the limit of adding " + countero + " options"); 
 
      } else { 
 
       newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 1) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + countero + "]'></div>"; 
 
       $("div[class*=ContentWindow]").css("height", "+=27"); 
 
       countero++; 
 
      } 
 
     }; 
 
    } 
 
     $(".container").css("height", "+=344"); 
 
     newdiv[counterq].innerHTML += "<div class='AddOption' onclick='AddOption();'><img src='/img/Plussmall.png'>Add option</div>"; 
 
    counterq++; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <div id="Content"></div> 
 

 

 
     <div class="AddContent" onclick="AddContent('Content');" > 
 
     \t <img src="/img/Plussmall.png">Add content 
 
     </div>

Answer 1

如果你想在櫃檯2增加，使用countero += 2代替countero++。

var counterq = 0; 
 
var limitq = 3; 
 
var countero = 0; 
 
var limito = 5; 
 

 
function AddContent(divName) { 
 
    if (counterq == limitq) { 
 
    alert("You have reached the limit of adding " + counterq + " inputs"); 
 
    } else { 
 
    var newdiv = new Array() 
 
    newdiv[counterq] = document.createElement('div'); 
 
    newdiv[counterq].className = 'new-rect'; 
 
    if (counterq == limito) { 
 
     alert("You have reached the limit of adding " + countero + " options"); 
 
    } else { 
 
     newdiv[counterq].innerHTML = "Entry " + (countero + 1) + " <br><input type='text' name='myInputs[" + countero + "]'><br>Entry " + (countero + 2) + " <br><input type='text' name='myInputs[" + countero + "]'><br>"; 
 
     document.getElementById(divName).appendChild(newdiv[counterq]); 
 
     countero += 2; 
 
    } 
 

 
    counterq++; 
 
    } 
 
}

.new-rect { 
 
    width: 300px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Content"></div> 
 

 
<input type="button" class="AddContent" value="Add content" onclick="AddContent('Content');">