Javascript onchange 이벤트가 작동하지 않습니다.

Question

이 코드는 체크 상자가 선택 될 때까지 선택 입력 필드를 숨기려고했습니다. 작동하지만 페이지를 처음로드 할 때 모두 표시됩니다. 확인란이 채워질 때까지 보이지 않게해야합니다. 페이지를로드 한 다음 체크 상자를 선택 취소하고 개체가 사라지면 작동하는지 알 수 있습니다.하지만 시작 부분에 더 중요한 이유가 표시됩니다. 어떻게 중지합니까? 그렇게하는 것에서?

코드 :

function doruc() { 
 
    var elem = document.getElementById("secondhalf1"), 
 
     checkBox = document.getElementById("pizza11"); 
 
    elem.style.display = checkBox.checked ? 'block' : 'none'; 
 
};

<input type="checkbox" id="pizza22" onclick="doruc()" name="halfHalf2" />

Answer 1

당신은 none에 스타일을 설정합니다 그 함수를 호출 한 후 문서 준비 상태 후 전역 범위에서 doruc 함수를 호출 할 필요가있다.

<script> 
    function doruc() { 
     var elem = document.getElementById("secondhalf1"), 
     checkBox = document.getElementById("pizza11"); 
     elem.style.display = checkBox.checked ? 'block' : 'none'; 
    }; 

    doruc(); 
</script> 

Answer 2

나는 그것이 당신의 문제를 해결할 수 있다고 생각합니다.

if(pizza22) { 
    secondhalf1.style.display="none"; 
    } 
    pizza22.onchange = function() { 
     if(secondhalf1.style.display==="none") {secondhalf1.style.display="";} 
     else if(secondhalf1.style.display==="") {secondhalf1.style.display="none";secondhalf1}; 
    } 

JsFiddle : 자바 스크립트에서 ID의 https://jsfiddle.net/x22ugdmm/1/

Answer 3

당신의 이름은 당신의 요소에 일치하지 않습니다. JavaScript에는 pizza11이 있고 입력 태그에는 pizza22가 있습니다. 그래서 그것에 대해 조사하십시오. 두 번째 이유는 함수를 호출하지 않았다는 것입니다. 방금 정의한 것입니다.

function doruc() { 
 
    var elem = document.getElementById("secondhalf1"), 
 
     checkBox = document.getElementById("pizza11"); 
 
    elem.style.display = checkBox.checked ? 'block' : 'none'; 
 
}; 
 
doruc();

<input type="checkbox" id="pizza11" onclick="doruc()" name="halfHalf2" />

는 작동이보십시오.