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. 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.
id
of input field is not a variable but a string, you have forgot to wrap it in ""
. So in your code pairheader
should instead be "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. The variable isn't defined, so it errors. document.getElementById()
takes a string as it's paramater
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. It's ok.
But what about pairheader
? You are using it in plain.
First you need to learn about how parameters are used in functions. Then 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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.