이미지 숨기기/표시 버튼 JS

Question

나는 3 개의 이미지가있는 웹 페이지를 가지고 있는데 클릭 한 번에 모든 이미지를 숨기고 버튼을 표시합니다 (이 부분은 아직 구현되지 않았습니다). 나는 그들을 숨기기위한 JS 함수를 가지고 있지만 작동하지 않으며 나는 그 이유를 모른다. 이것이 내 코드의 일부입니다.

<div id="left"><img id="leftimage" name="leftimage" src="pic1url.jpg" style= 
"visibility:visible"></div> 

<div id="centerright"> 
    <div id="center"><img id="centerimage" name="centerimage" src="pic2url.jpg" 
    style="visibility:visible"></div> 

    <div id="right"><img id="rightimage" name="rightimage" src="pic2url.jpg" 
    style="visibility:visible"></div> 
</div><script type="text/javascript"> 
    var hideShowButton = document.getELementById("hideShowButton"); 
     hideShowButton.onclick = function() 
     { 
      var allImages = { left:"leftimage"; center:"centerimage"; right:"rightimage"}; 
      if(document.getElementById("leftimage").style.visibility == 'visible') 
      { 
       for (var image in allImages) 
       { document.getElementById(allImages[image]).style.visibility = 'hidden'; 
        document.getElementById(allImages[image+"1"]).style.visibility = 'hidden'; 
            document.getElementById(allImages[image+"2"]).style.visibility = 'hidden'; 
       } 
     document.getElementById("hideShowButton").innerHTML = "Mostrar imagens"; 
      } 
     } 
</script> 

<div id="buttons"> 
    <input id="hideShowButton" type="button" value="Hide Pics"> 
</div> 

Answer 1

답변을 읽기 전에 브라우저의 콘솔 사용 방법을 배우는 것이 좋습니다. JavaScript 코드가 충돌하게 만드는 모든 오류를 인쇄합니다. 또한 JavaScript 자습서를 읽을 시간이 필요합니다.

코드에 많은 문제가 있습니다. 첫째, 오타가 있습니다 "getELementById"(L은 소문자 대신 대문자입니다). 둘째, 스크립트 태그를 단추 아래에 놓아야합니다. 셋째, 개체를 만들 때 세미콜론 (;)이 아닌 쉼표 (,)를 사용하여 속성을 구분해야합니다. 마지막으로 for 루프를 잘못 사용했다. 당신을 도우려는 경우, 여기에 수정 된 코드가 있지만 사람들이 매번 당신을 위해 그것을 기대하지는 않습니다. 당신은 :) 미래에 자신의에서이 같은 실수를 찾을 필요가

<div id="left"> 
    <img src="pic1url.jpg" id="leftimage" style="visibility:visible" /> 
</div> 

<div id="centerright"> 
    <div id="center"> 

     <img src="pic2url.jpg" id="centerimage" style="visibility:visible"/> 
    </div> 
    <div id="right"> 

     <img src="pic2url.jpg" id="rightimage" style="visibility:visible"/> 
    </div> 
</div> 

<div id="buttons"> 
    <input type="button" value="Hide Pics" id="hideShowButton" /> 
</div> 
<script type="text/javascript"> 

    var hideShowButton = document.getElementById("hideShowButton"); 

    hideShowButton.onclick = function() 
    { 
     var allImages = { left:"leftimage", center:"centerimage", right:"rightimage"}; 

     if(document.getElementById("leftimage").style.visibility == 'visible') 
     { 
      for (var image in allImages) 
      { 
       document.getElementById(allImages[image]).style.visibility = 'hidden'; 
      } 
      document.getElementById("hideShowButton").innerHTML = "Mostrar imagens"; 
     } 
    } 
</script> 

Answer 2

를 사용하여 자바 스크립트 당신이 할 수있는을 통해 모든보기 각각

<img id="one" src="pic1url.jpg" style="display:none;" /> 

을 숨기고 보여으로 모니터 없음을 사용하거나 CSS의 속성을 차단할 수 있습니다 이것을 사용하십시오

document.getElementById(one).style.display = 'none'; 

Answer 3

죄송합니다. 귀하의 코드는 약간 지저분합니다. 매번 모든 이미지를 숨기려고하면 for 문을 사용하는 이유는 무엇입니까?

한편, 당신은 for ... in 문을 오용하고 있습니다. AllImages는 숫자 인덱스가없는 연관 배열입니다. (AllImages의 var 이미지)의 경우 이미지가 '왼쪽'으로 표시되고 '가운데', '오른쪽'(사용중인 객체의 속성 이름)이 표시됩니다. 따라서

AllImages[image+1] 

과 같은 성명은 '정의되지 않음'을 반환하고 코드에서 오류가 발생합니다. 코드는 다음과 같아야합니다 : 그런데

hideShowButton.onclick = function() 
    { 
     var allImages = { left:"leftimage"; center:"centerimage"; right:"rightimage"}; 
     if(document.getElementById("leftimage").style.visibility == 'visible') 
     { 
      for (var image in allImages) 
      { 
       document.getElementById(allImages[image]).style.visibility = 'hidden'; 
      } 
      document.getElementById("hideShowButton").innerHTML = "Mostrar imagens"; 
     } 
    } 

, 당신이 자바 스크립트 루프에 대한 몇 가지 문서를 읽어 제안, MDN