For 루프 구문 오류 - 한 번 클릭해도 전체 루프가 발생 함

Question

초보자 인 자바 스크립트에서 나는 간단한 문제가 있다고 생각합니다.

• 편집 나는 이벤트가 사용자가 드롭 박스 3 회에서 옵션을 클릭 한 후 (두 개의 버튼이 표시되는) 일이하고 싶었다. 처음에는 for 루프가 도움이 될 것이라고 생각했습니다. 또한 마지막 선택 ("없음"또는 기타 옵션)을 사용하여 경고를 표시하고 클릭 수에 영향을 미치지 않았습니다. 희망은 더 이해가됩니다.

모든 도움을 주시면 감사하겠습니다.

var question1 = new Array(); 

window.onload = function() { 
    var eSelect = document.getElementById('question1'); 
    var optOtherReason = document.getElementById('displayresponse'); 
    var options = document.getElementsByTagName("option"); 

    eSelect.onchange = function() { 
     for (var i=0; i<3; i++) { 
      if (eSelect.selectedIndex !== 3) { 
        var li = document.createElement("li"); 
        li.innerHTML = options[eSelect.selectedIndex].innerHTML; 
        var ol = document.getElementById("appendedtext"); 
        ol.appendChild(li);   

       question1.push(li.innerHTML); 
       var x= document.getElementById("display"); 
       x.innerHTML=question1; 
      } 
     } 
     if (eSelect.selectedIndex == 3) { 
      i=0; 
      optOtherReason.style.display = 'block'; 
     } 
    } 
    insertbutton= "block"; 
    displaybutton = "block"; 
} 

<select id="question1" name="question"> 
    <option value="x">Reason1</option> 
    <option value="y">Reason2</option> 
    <option value="other">Otherreason</option> 
    <option value="none">None</option> 
</select><br> 

<div id="insertbutton" style="display:none;"> 
    <input type="button" value="Save" onclick="insert();"> 
</div> 

<div id="generatebutton" style="display:none;"> 
    <input type="button" value="Show Drink" onClick="generate();"> 
</div> 

<div id="displayresponse" style="display:none;">If you did not see a choice here, you may search for other sites.</div> 

<ol id="appendedtext"> </ol> 
<div id="display"></div>