Javascript로 표시되는 Html 버튼이 작동하지 않습니다.

Question

JavaScript 가시성에 따라 팝업 창을 표시하거나 숨기는 JavaScript 기능이 있습니다. 이 함수의 이전 버전은 훌륭하게 작동했습니다. 즉, 닫기 버튼은 창을 사라지게 만들었습니다. 그러나 함수에 코드를 추가 한 후에는 닫기 버튼이 더 이상 작동하지 않습니다. 아래는 함수의 이전 버전과 현재 버전, 그것이 조작하는 'overlay'div, div에 대한 CSS입니다. 어떤 도움이라도 대단히 감사하겠습니다. 내 변경 사항으로 인해 문제가 발생했는지 또는 문제를 해결할 수 있는지 파악할 수 없습니다.

이전 (작업) 기능 :

<script> 
function overlay(descrip, name) { 
    var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br><input type='button' onclick='overlay()' value='Close'></input></div>"; 
    var el = document.getElementById("overlay"); 
    el.innerHTML = descripBox; 
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; 
} 
</script> 

현재 (작동하지 않는) 기능 :

<script> 
function overlay(descrip, name, req) { 
    if(req != ''){ 
     var obj = new Array(); 
     obj = req.split("|"); 
     var reqHtml = "Requirements:</br><ul>"; 
     for(var i = 0; i < obj.length; i++) 
     { 
      reqHtml += "<li>"+obj[i]+"</li>"; 
     } 
     reqHtml+= "</ul></br>"; 
    } 
    else 
     var reqHtml = ''; 
    var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+ 
     reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>"; 
    var el = document.getElementById("overlay"); 
    el.innerHTML = descripBox; 
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; 
} 
</script> 

오버레이 사업부 :

<div id="overlay"> 
    <div> 
      </br> 
      <input type="button" onclick="overlay()" value="Close"></input> 
    </div> 
</div> 

CSS :

#overlay { 
    visibility: hidden; 
    position: absolute; 
    left: 0px; 
    top: 500px;   
    width:100%; 
    height:100%; 
    z-index: 1000; 
} 

#overlay div { 
    width:300px; 
    margin: 100px auto; 
    background-color: #ebebeb; 
    border:2px solid #c7c7c7; 
    padding:15px; 
} 

Answer 1

첫째, 코드가 매우 이상하게 보입니다. 정의되어 있지 않다고 REQ하게

onclick="overlay()" 

를 : 매개 변수없이 함수를 호출하기 때문에 일부 가 호출 할 것이다

if(req != ''){ 
     var obj = new Array(); 
     obj = req.split("|"); 
     var reqHtml = "Requirements:</br><ul>"; 
     for(var i = 0; i < obj.length; i++) 
     { 
      reqHtml += "<li>"+obj[i]+"</li>"; 
     } 
     reqHtml+= "</ul></br>"; 
    } 

. 그러나 자바 스크립트에서 undefined는 빈 문자열 ('')과 동일하고 0 또는 false와 같습니다. "! =="를 사용하지 않으면 엄격하게 동등하지 않습니다. 즉, 빈 문자열이 필요합니다. 그런 다음

이 :

else 
     var reqHtml = ''; 

가 불량입니다. 대괄호 나 무엇을 잊어 버렸는지 잘 모르겠다. 그러나 항상은 줄에 넣고 싶지 않다면, if/else를 대괄호로 묶는다. 이는 두 행 사이에 명령을 추가하려는 경우 오류를 방지하기위한 것입니다. 또한, 여기 var 변수는 "else"범위에서 reqHTML 변수를 생성하므로 액세스 할 수 없습니다. 당신이 당신의 코드를 만드는 함수의 시작 부분에 선언해야 의미

는 다음과 같다 :

var reqHtml = ''; 
if(req != ''){ 
     var obj = new Array(); 
     obj = req.split("|"); 
     var reqHtml = "Requirements:</br><ul>"; 
     for(var i = 0; i < obj.length; i++) 
     { 
      reqHtml += "<li>"+obj[i]+"</li>"; 
     } 
     reqHtml+= "</ul></br>"; 
} 
var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+ 
     reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>"; 
var el = document.getElementById("overlay"); 

을 그리고, 나는 CSS가 무엇을 알고 있기 때문에 생각의 나쁜 방법입니다 감지 생각 그것은 예를 들어 정의되지 않을 수 있습니다. 변수 "boxVisibility"를 작성하여 클래스 상자를 설명하는 것이 더 좋으므로 더 많은 정보를 지능적으로 관리 할 수 ​​있습니다.

마지막으로, 모든 함수 매개 변수는 어쨌든 정의되지 않습니다. 즉, 기능을 시작하기 전에 어 디 이언트를 전역으로 유지하거나 읽어야 함을 의미합니다. 다음은 작동해야하는 예입니다 :

var descrip = "Test desc"; 
var name = "Test name"; 
var req = "test req"; 
var boxVisibility = true; 

function updateBox() { 
    var reqHtml = ''; 
    if(req != ''){ 
      var obj = new Array(); 
      obj = req.split("|"); 
      var reqHtml = "Requirements:</br><ul>"; 
      for(var i = 0; i < obj.length; i++) 
      { 
       reqHtml += "<li>"+obj[i]+"</li>"; 
      } 
      reqHtml+= "</ul></br>"; 
     } 
     var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+ 
      reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>"; 
     var el = document.getElementById("overlay"); 
     el.style.visibility = (boxVisibility) ? "hidden" : "visible"; 
} 
function overlay() { 
    boxVisibility = !boxVisibility; // Invert the box visibility variable 
    updateBox(); // Update box display 
} 

그런 다음 응용 프로그램에서 수행하려는 작업에 따라 desc, name 및 req를 변경해야합니다.