Else If statement never runs

So I'm trying to implement platforms for the game I'm making for a project (similar to falldown) and have created multiple arrays that have contain all the possible platforms (canvas is 360 so there is if platform[i] == 1 it draws a rect)

var canvas;
var ctx;
var isPlaying = false;

window.onload = function(){
  canvas= document.getElementById("gamesCanvas");
  ctx = canvas.getContext("2d");
  var fps = 60;
  setInterval(function(){    
  }, 1000/fps);
  createMenu();
  canvas.addEventListener('click', getClicks.bind(this), false)
    //canvas.addEventListener("mousemove", getPos)    
}

function initialise(){
  isPlaying = true;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  createRect(0,0, canvas.width, canvas.height, 'black');
  createPlatforms();
}

function createPlatforms(){
  x = randint(1,2);
  console.log(x)
  var i;
  var pos = -60;
  var platform1 = [0,1,1,1,1,1];
  var platform2 = [1,0,1,1,1,1];
  var platform3 = [1,1,0,1,1,1];
  var platform4 = [1,1,1,0,1,1];
  var platform5 = [1,1,1,1,0,1];
  var platform6 = [1,1,1,1,1,0];
  if(x==1){  
    for (i=0; i<platform1.length; ++i) {
      var pos = (pos+60); 
      if(platform1[i] == 1){
        createRect(pos, 60, 60,5, 'white');       
      }
    } 
  }
  else if(x==2){
    for (i=0; i<platform2.length; ++i){
      var pos = (pos+60);
      if (platform2[i] ==2){
        createRect(pos,60,75,5,'white');
      }
    }
  }
}

function randint(min, max) {
    return ~~(Math.random() * (max - min + 1) + min);
}

function background(color) {
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function createMenu(){
    background("black");
    if (!isPlaying) {
        ctx.font = "60px monospace";
        ctx.fillStyle = "white";
        ctx.fillText("FallDown", 40, 130);

        ctx.font = "34px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("PLAY", 130, 260);

        ctx.font = "34px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("LEADERBOARD", 50, 340);

        ctx.font = "34px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("SETTINGS", 90, 420);
    }
}

function createRect(leftX, topY, width, height, color){
    ctx.fillStyle = color;
    ctx.fillRect(leftX, topY, width, height);

}

function getClicks(evt) {
    var x = evt.offsetX;
    var y = evt.offsetY;
    if ((x > 110 && x < 240) && (y > 220 && y < 275) && !isPlaying) {
        initialise()
    }
}

However, if x>1 (so basically an else if statement is required to run) it doesn't draw anything.

I was testing to see whether it is something that I could fix, however, all I managed to realise that if the if statement has got the contents of the else if statement than it will draw the rects in the right position so in this case (platform2) would be drawn.

I've managed to narrow down the problem but I'm not sure how to fix it. I have experience with python but have never experienced anything like this

Just letting you know that I can't just use the else statement as I have to implement 6 platforms and if I were to use just if and else than that would mean I could only draw 2 of the 6 platforms