잡히지 않은 TypeError : null의 속성 'style'을 읽을 수 없습니다.

Question

내 코드가 수정하는 방법을 모르는 문제가있는 것 같습니다. 나는이 물건에 매우 새롭고, 내가하는 일을 거의 모른다. 내 코드를 실행할 때마다이 오류가 나타납니다. 파란색 상자가 사라지는 버튼을 클릭하면 만들려고합니다. 그리고 버튼을 다시 클릭하면 파란색 상자가 다시 나타나고 녹색 상자가 사라집니다.

<script type="text/javascript"> 
    function toggle_visibility(id1,id2){ 
    var e1 = document.getElementById(id1); 
    var e2 = document.getElementById(id2); 

    if (e1.style.visibility == 'hidden') { 
     e1.style.visibility = 'visible'; 
     e2.style.visibility = 'visible';} 
     else{ 
     e1.style.visibility = 'hidden'; 
     e2.style.visibility = 'hidden'; 
     } 
     } 
</script> 
<div class="square" id="bluebox" style="visibility:visible"></div><br> 
<div class="box" id="greenbox" style="visibility:visbible"></div><br> 
<button onclick=" toggle_visibility(greenbox,bluebox)">Pls Work</button> 

Answer 1

당신은 함수의 인수에 따옴표를 추가해야합니다 : 여기에 내 코드입니다

<button onclick="toggle_visibility('greenbox','bluebox')">Pls Work</button> 

그들은 변수가되지 않습니다, 그들은 문자열입니다.

Answer 2

두 요소 중 id을 문자열으로 함수에 전달해야합니다.

function toggle_visibility(id1, id2) { 
 
    var e1 = document.getElementById(id1); 
 
    var e2 = document.getElementById(id2); 
 

 
    if (e1.style.visibility == 'hidden') { 
 
     e1.style.visibility = 'visible'; 
 
     e2.style.visibility = 'visible'; 
 
    } else { 
 
     e1.style.visibility = 'hidden'; 
 
     e2.style.visibility = 'hidden'; 
 
    } 
 
    }

.square, .box { 
 
    height: 50px; 
 
    width: 50px; 
 
    visibility: hidden; 
 
} 
 

 
#greenbox { 
 
    background-color: green; 
 
} 
 

 
#bluebox { 
 
    background-color: blue; 
 
}

<div class="square" id="bluebox"></div> 
 
<br> 
 
<div class="box" id="greenbox"></div> 
 
<br> 
 
<button onclick="toggle_visibility('bluebox', 'greenbox')">Pls Work</button>

Answer 3

id는 HTML에서 제대로 전달되지 않습니다 매개 변수, 당신은 당신을 위해 작동해야 코드에 따라 onclick="toggle_visibility('greenbox','bluebox')"

처럼 정확하게 ID를 전달해야합니다.

function toggle_visibility(id1,id2){ 
 
    var e1 = document.getElementById(id1); 
 
    var e2 = document.getElementById(id2); 
 

 
    if (e1.style.visibility == 'hidden') { 
 
     e1.style.visibility = 'visible'; 
 
     e2.style.visibility = 'visible';} 
 
     else{ 
 
     e1.style.visibility = 'hidden'; 
 
     e2.style.visibility = 'hidden'; 
 
     } 
 
     }

<div class="square" id="bluebox" style="visibility:visible"></div><br> 
 
<div class="box" id="greenbox" style="visibility:visbible"></div><br> 
 
<button onclick="toggle_visibility('greenbox','bluebox')">Pls Work</button>