[英]hide and show a div using javascript
I have a question, I'm making a javascript that shows and hide a div by clicking another div but because divs don't have a value or a name I can't find out a way to do this.我有一个问题,我正在制作一个通过单击另一个 div 来显示和隐藏 div 的 javascript,但是因为 div 没有值或名称,所以我找不到执行此操作的方法。 I'm using input type hidden because it can have a value, but still it doesn't work as it should.我正在使用隐藏的输入类型,因为它可以有一个值,但它仍然不能正常工作。 I hope somebody can help me to find a solution thanks!我希望有人可以帮助我找到解决方案谢谢!
function hideshow(pairsblock){ var value = document.getElementById(pairheader).value; if(value == 1){ document.getElementById(pairsblock).style.display = 'block'; document.getElementById(pairheader).value = 2; }else if(value == 2){ document.getElementById(pairsblock).style.display = 'none'; document.getElementById(pairheader).value = 1; } }
.box { border:2px solid #0f111d82; margin-left:10px;important: margin-right;10px:important; padding-left:5px; padding-top:15px; padding-bottom:15px; padding-right:5px; background-color: #0f111d82; }
<div id="pairheader2" onclick="hideshow('pairsblock')" class="box"> <input type="hidden" id="pairheader" value="1"> <h6>header</h6> </div> <div id="pairsblock" class="pairs-block"> <p>test</p>
You code is throwing "Uncaught TypeError: Cannot read property 'value' of null"
because document.getElementById(pairheader)
, as pairheader
variable is not defined.您的代码抛出"Uncaught TypeError: Cannot read property 'value' of null"
,因为document.getElementById(pairheader)
pairheader
变量。
id
of input field is not a variable but a string, you have forgot to wrap it in ""
.输入字段的id
不是变量而是字符串,您忘记将其包装在""
中。 So in your code pairheader
should instead be "pairheader"
.所以在你的代码中pairheader
应该改为"pairheader"
。
function hideshow(pairsblock){ var value = document.getElementById("pairheader").value; if(value == 1){ document.getElementById(pairsblock).style.display = 'block'; document.getElementById("pairheader").value = 2; }else if(value == 2){ document.getElementById(pairsblock).style.display = 'none'; document.getElementById("pairheader").value = 1; } }
.box { border:2px solid #0f111d82; margin-left:10px;important: margin-right;10px:important; padding-left:5px; padding-top:15px; padding-bottom:15px; padding-right:5px; background-color: #0f111d82; }
<div id="pairheader2" onclick="hideshow('pairsblock')" class="box"> <input type="hidden" id="pairheader" value="1"> <h6>header</h6> </div> <div id="pairsblock" class="pairs-block"> <p>test</p>
You're using pairheader
plainly so javascript expects a variable.您显然正在使用pairheader
,因此 javascript 需要一个变量。 The variable isn't defined, so it errors.该变量未定义,因此出错。 document.getElementById()
takes a string as it's paramater document.getElementById()
接受一个字符串作为参数
function hideshow(pairsblock){ var value = document.getElementById('pairheader').value; if(value == 1){ document.getElementById('pairsblock').style.display = 'block'; document.getElementById('pairheader').value = 2; }else if(value == 2){ document.getElementById('pairsblock').style.display = 'none'; document.getElementById('pairheader').value = 1; } }
.box { border:2px solid #0f111d82; margin-left:10px;important: margin-right;10px:important; padding-left:5px; padding-top:15px; padding-bottom:15px; padding-right:5px; background-color: #0f111d82; }
<div id="pairheader2" onclick="hideshow('pairsblock')" class="box"> <input type="hidden" id="pairheader" value="1"> <h6>header</h6> </div> <div id="pairsblock" class="pairs-block"> <p>test</p>
Problem with your code.您的代码有问题。
You are using pairsblock
as a parameter.您正在使用pairsblock
作为参数。 It's ok.没关系。
But what about pairheader
?但是pairheader
呢? You are using it in plain.您正在简单地使用它。
First you need to learn about how parameters are used in functions.首先,您需要了解如何在函数中使用参数。 Then document.getElementById('someId') .然后是 document.getElementById('someId') 。
function hideshow(pairsblock){ var value = document.getElementById('pairheader').value; if(value == 1){ document.getElementById(pairsblock).style.display = 'block'; document.getElementById('pairheader').value = 2; }else if(value == 2){ document.getElementById(pairsblock).style.display = 'none'; document.getElementById('pairheader').value = 1; } }
.box { border:2px solid #0f111d82; margin-left:10px;important: margin-right;10px:important; padding-left:5px; padding-top:15px; padding-bottom:15px; padding-right:5px; background-color: #0f111d82; }
<div id="pairheader2" onclick="hideshow('pairsblock')" class="box"> <input type="hidden" id="pairheader" value="1"> <h6>header</h6> </div> <div id="pairsblock" class="pairs-block"> <p>test</p>
If have Jquery in your application and if you are ok to use it , you can use it and use its toggle method to simple hide and show the pairsblock div using its id.如果您的应用程序中有 Jquery 并且您可以使用它,则可以使用它并使用它的切换方法来使用其 id 简单地隐藏和显示 pairsblock div。
function hideshow(pairsblock){ $('#pairsblock').toggle() }
.box { border:2px solid #0f111d82; margin-left:10px;important: margin-right;10px:important; padding-left:5px; padding-top:15px; padding-bottom:15px; padding-right:5px; background-color: #0f111d82; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pairheader2" onclick="hideshow('pairsblock')" class="box"> <input type="hidden" id="pairheader" value="1"> <h6>header</h6> </div> <div id="pairsblock" class="pairs-block"> <p>test</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.