我的代码中未知的循环/计数器

Question

这段代码是一系列的if语句，但是现在变成了switch语句。我正在制作一个基本的Visual Novel系统。首先，它将对话记录到“脚本”中。然后循环回到问题。无论出于何种原因，当我再次单击该选项以再次运行该选项时，它现在都对情况13执行两次编码（因为我的msg收到两次警报，并将对话两次记录到“脚本”中）。然后3次，等等。在这里，我已尽可能地删除了多余的编码。

代码：

var textnum = 12; //gets me to case 12.

function viewScript() { //there's a button that toggles the script on and off.
  var div = document.getElementById("fullscript");
  div.style.display = div.style.display == "block" ? "none" : "block";
}

function hideChoices() { //clears the text between cases 12 & 13. 
  document.getElementById("charchoice").innerHTML = "";
  return;
}

$("#clickarea").click(function() {
  switch (textnum) {
    case 12:
      document.getElementById("charchoice").innerHTML = "What happened to bring you here?";
      
      $("#charchoice").click(function() {
        document.getElementById("script").innerHTML += "User: What happened to bring you here? <br>";
        textnum = 13;
        document.getElementById("clickarea").click();
      });
      break;
    case 13:

      hideChoices();
      textnum = 12;
      alert("returnpls");
      break;
    default:
      break;
  }
});

.dialoguebox {
	position: absolute;
	width: 1300px;
	height: 120px;
	line-height: 32px;
	top:520px;
	left: 15px;
	font-size: 30px;
	overflow-y: scroll;
	font color: "yellow";
}

button.link {
	background:none;
	border:none;
	font-size: 26px;
	
}

#charchc1 {
	color: yellow;
}

#charchc1:hover {
	color: white;
}

#scriptbtn {
	position: absolute;
	left: 10px;
	height: 40px;
	width: 60px;
}

#fullscript {
	position: absolute;
	width: 1270px;
	height: 600px;
	left: 80px;
	background-color: black;
	opacity: .96;
	overflow-y: scroll;
	display:none;
	z-index: 10000;
}

#script {
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: 20px;	
}

#clickarea {
	position: absolute;
	width: 1280px;
	height: 450px;
	left: 70px;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="viewScript()" id="scriptbtn">Script</button>

<div id="clickarea"> click area </div>

<div id="fullscript">
  <div id="script"></div>
</div>

<div class="dialoguebox">
  <button id="charchoice" class="link"><div class="charchoice"> </div> </button> <br>
</div>

希望你们能看到我看不到的东西。这整天困扰着我。您可能需要在测试代码之前对其进行一些修改。在第13种情况下，我不再显示对话以简化此处的发布。如果您第二次单击，它将循环回到情况12。

---一种解决方案（由以前的人在这里建议） 是将charchoice移到clickarea函数之外：

var textnum = 12; //gets me to case 12.

$("#charchoice").click(function() {
        document.getElementById("script").innerHTML += "User: What happened to bring you here? <br>";
        textnum = 13;
        document.getElementById("clickarea").click();
      });

function viewScript() { //there's a button that toggles the script on and off.
  var div = document.getElementById("fullscript");
  div.style.display = div.style.display == "block" ? "none" : "block";
}

function hideChoices() { //clears the text between cases 12 & 13. 
  document.getElementById("charchoice").innerHTML = "";
  return;
}

$("#clickarea").click(function() {
  switch (textnum) {
    case 12:
      document.getElementById("charchoice").innerHTML = "What happened to bring you here?";


      break;
    case 13:

      hideChoices();
      textnum = 12;
      alert("returnpls");
      break;
    default:
      break;
  }
});

这似乎是问题的根源。我想知道是否有一种方法可以将其嵌套在案例13中以便整理。无论出于何种原因，尽管此编码嵌套在其中，但我创建了某种不会自行终止的递归。