javascript - JavaScript: 定義済み関数未定義

Question

だから私はこのJSを持っています:

 document.getElementById("config2").addEventListener("click", function(){
   config3();
   console.log("In Function config.onclick()...");
 });

 function config3()
 {
   document.body.innerHTML+="<div style=\"opacity:0;\" class=\"popoutcont\" id=\"formcont\"><div style=\"opacity:0;\"><div class=\"popoutform\"></div></div>";
   setInterval(function(){document.getElementById("formcont").style.opacity+=0.01;if(document.getElementById("formcont").style.opacity===1){clearInterval(this)}}, 1);
   console.log("In Function Config...");
 }

そして、このHTML：

<p class='spectxt' style='font-weight:normal;' id='config2'><strong>Payload Configuration:</strong> Seats: 2</p>"

まず、イベントは発生しません。コンソールに出力は送信されません。次に、関数を呼び出すと、Chrome DevTools JS コンソールに config3 が未定義であると表示されます。なぜこれが起こっているのか、何が原因なのか?