Javascript/この色どーれだ

const question = document.getElementById("question");
const colors = document.getElementById("colors");
const image = document.getElementById("image");
const nextBtn = document.getElementById("nextBtn");
var hiraganaArray = ["あお", "あか", "き", "みどり"];
var katakanaArray = ["アオ", "アカ", "キ", "ミドリ"];
var kanjiArray = ["青", "赤", "黄", "緑"];
var qArray = hiraganaArray;
var rnd;

var ji = document.getElementById("ji");
ji.addEventListener("change", function(){
  if(ji.value == "katakana"){
  	qArray = katakanaArray;
  } else if(ji.value == "kanji"){
  	qArray = kanjiArray;
  } else {
  	qArray = hiraganaArray;
  }
});

nextBtn.addEventListener("click", function(){
  image.src = "";
  switch(qArray){
  	case hiraganaArray:
  	  if(qArray.length >= 2){
  		aaa();
	  }else if(qArray.length <= 0){
	  	nextBtn.innerHTML = "おわり";
	  	nextBtn.addEventListener("click", function(){
	  	  location.reload();
	  	});
	  } else {
	  	aaa();
	  	nextBtn.innerHTML = "おわり";
	  }
	break;
	case katakanaArray:
	  if(qArray.length >= 2){
  		bbb();
	  }else if(qArray.length <= 0){
	  	nextBtn.innerHTML = "オワリ";
	  	nextBtn.addEventListener("click", function(){
	  	  location.reload();
	  	});
	  } else {
	  	bbb();
	  	nextBtn.innerHTML = "オワリ";
	  }
	break;
	case kanjiArray:
	  if(qArray.length >= 2){
	  	ccc();
	  }else if(qArray.length <= 0){
	  	nextBtn.innerHTML = "終了";
	  	nextBtn.addEventListener("click", function(){
	  	  location.reload();
	  	});
	  } else {
	  	ccc();
	  	nextBtn.innerHTML = "終了";
	  }
  }
});

function aaa(){
  boxCreate();
  switch(qArray[rnd]){
	case "あお":
	  $(".blue").click(function(){
	  	good();
	  });
	  $(".red, .yellow, .green").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
	case "あか":
	  $(".red").click(function(){
	  	good();
	  });
	  $(".blue, .yellow, .green").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
	case "き":
	  $(".yellow").click(function(){
	  	good();
	  });
	  $(".red, .blue, .green").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
	case "みどり":
	  $(".green").click(function(){
	  	good();
	  });
	  $(".red, .yellow, .blue").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
  }
}

function bbb(){
  boxCreate();
  switch(qArray[rnd]){
	case "アオ":
	  $(".blue").click(function(){
	  	good();
	  });
	  $(".red, .yellow, .green").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
	case "アカ":
	  $(".red").click(function(){
	  	good();
	  });
	  $(".blue, .yellow, .green").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
	case "キ":
	  $(".yellow").click(function(){
	  	good();
	  });
	  $(".red, .blue, .green").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
	case "ミドリ":
	  $(".green").click(function(){
	  	good();
	  });
	  $(".red, .yellow, .blue").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
  }
}

function ccc(){
  boxCreate();
  switch(qArray[rnd]){
	case "青":
	  $(".blue").click(function(){
	  	good();
	  });
	  $(".red, .yellow, .green").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
	case "赤":
	  $(".red").click(function(){
	  	good();
	  });
	  $(".blue, .yellow, .green").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
	case "黄":
	  $(".yellow").click(function(){
	  	good();
	  });
	  $(".red, .blue, .green").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
	case "緑":
	  $(".green").click(function(){
	  	good();
	  });
	  $(".red, .yellow, .blue").click(function(){
	  	image.src = "img/bad.jpg";
	  });
	break;
  }
}

function boxCreate(){
  var blueBox = document.createElement("div");
  blueBox.className = "blue";
  colors.appendChild(blueBox);
  var redBox = document.createElement("div");
  redBox.className = "red";
  colors.appendChild(redBox);
  var yellowBox = document.createElement("div");
  yellowBox.className = "yellow";
  colors.appendChild(yellowBox);
  var greenBox = document.createElement("div");
  greenBox.className = "green";
  colors.appendChild(greenBox);
  nextBtn.disabled = true;
  rnd = Math.floor(Math.random()*qArray.length);
  question.innerText = "「" + qArray[rnd] + "いろ」はどれかな";
}
function good(){
  image.src = "img/good.jpg";
  qArray.splice(rnd, 1);
  $("#colors").children().remove();
  nextBtn.disabled = false;
}