未捕获TypeError：无法读取属性'样式'null

我的代码似乎有一个问题，我不知道如何解决。我对这个东西非常陌生，几乎不知道我在做什么。每次运行我的代码时都会弹出此错误消息。我试图让你点击蓝色框消失的按钮。当你再次点击该按钮时，蓝色框再次出现，绿色框消失。这里是我的代码：未捕获TypeError：无法读取属性'样式'null

<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>

来源

2017-02-09 N. Tyree

你需要引号添加到函数的参数：

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

他们不是变量，它们都是字符串。

来源

2017-02-09 17:29:21 TricksfortheWeb

您必须将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>

来源

2017-02-09 17:31:30

参数id不是从HTML正确传递，你需要正确地传递ID喜欢onclick="toggle_visibility('greenbox','bluebox')"

下面的代码应该为你工作。

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>

来源

2017-02-09 17:32:00 Agalo

谢谢！很棒！ –

未捕获TypeError：无法读取属性'样式'null

回答

相关问题