1

I'm working on multiple arrays and occured to one problem. When I have only one question div generated I can add additional questions without problem, but if I add another question div, I can't add additional questions to neither of both windows(same applies to any other number too), error which is I get is newdiv[counterq] is undefined. Can anybody help me with this issue? Thanks!

Also, how can I move div AddOption below created new one option input?

I'm new at programming sorry if won't explain in correct terms. Thanks!

Edit: Updated with new problem. Didn't wanted to create seperate topic.

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>

1
  • countero + 1 doesn't do anything -- it calculates the addition, but doesn't put it anywhere. If you want to increase countero by 2, use countero += 2; instead of countero++
    – Barmar
    Apr 1, 2015 at 15:48

1 Answer 1

1

If you want the counter to increase by 2, use countero += 2 instead of 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');">

10
  • Thanks! That really helps. However I'm still having issue figuring out how to reset 'countero' for each window
    – Exanimus
    Apr 1, 2015 at 15:59
  • Where are you creating different windows?
    – Barmar
    Apr 1, 2015 at 16:04
  • There's no window.open() call in your code to create multiple windows. Everything is in the same browser window.
    – Barmar
    Apr 1, 2015 at 16:09
  • You're just creating multiple DIVs, not multiple windows.
    – Barmar
    Apr 1, 2015 at 16:10
  • Oh, my mistake. I meant not seperate url window but just just drawn window in same page.
    – Exanimus
    Apr 1, 2015 at 16:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.