html - Javascript dynamic array window with multiple answer options -


i'm working on multiple arrays , occured 1 problem. when have 1 question div generated can add additional questions without problem, if add question div, can't add additional questions neither of both windows(same applies other number too), error newdiv[counterq] undefined. can me issue? thanks!

also, how can move div addoption below created new 1 option input?

i'm new @ programming sorry if won't explain in correct terms. thanks!

edit: updated new problem. didn't wanted 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 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 question' name='myquestion[" + counterq + "]'>";       if (countero == limito) {        alert("you have reached 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 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>

if want counter increase 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 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 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');">


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -