Question

Hoping someone can help me. I’m trying to create a function which adds a div (not the problem).

The problem is that I want the function to check if the div before is div1 or div2, and then add the next.

The pattern should look like this: div1, div2, div1, div2 etc. Right now I have 2 buttons, where the adds div1 and the other adds div2. I need a button, which adds 1 div onClick, but checks which div has already been added and then adds the next div(div1 or div2) inline.

My code so far:

function div1(){
                    var div1 = document.createElement("div");

                    div1.className = "div1";

                    $('.wrapper').append(div1);
                }

                function div2(){
                    var div2 = document.createElement("div");
                    div2.className = "div2";

                    $('.wrapper').append(div2);

                }

                $(".addDiv1").click(function(){
                    div1();
                })
                $(".addDiv2").click(function(){
                    div2();
                })

Answer 1

Intuitively, I would just create a generic function that changes the class of the div you want to add according to the previous state, and a global variable to keep track of the state you were in:

var current_class = "div1"

function newdiv(myclass){
  var div = document.createElement("div");
  div.className = myclass;
  $('.wrapper').append(div);
}


$(".addDiv").click(function(){
  newdiv(current_class);
  if (current_class == "div1"){
    current_class = "div2"
  }
  else {
    current_class = "div1"
  }
})