具有多个答案选项的 Javascript 动态数组窗口

Question

我在处理多个阵列时遇到了一个问题。 当我只生成一个问题 div 时，我可以毫无问题地添加其他问题，但是如果我添加另一个问题 div，我就无法向两个窗口中的任何一个添加其他问题(同样适用于任何其他数字)，这是我的错误get is 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');" >
        	<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');">