使用javascript隱藏和顯示一個div

Question

我有一個問題，我正在制作一個通過單擊另一個 div 來顯示和隱藏 div 的 javascript，但是因為 div 沒有值或名稱，所以我找不到執行此操作的方法。 我正在使用隱藏的輸入類型，因為它可以有一個值，但它仍然不能正常工作。 我希望有人可以幫助我找到解決方案謝謝！

 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>

Answer 1

您的代碼拋出"Uncaught TypeError: Cannot read property 'value' of null" ，因為document.getElementById(pairheader) pairheader變量。

輸入字段的id不是變量而是字符串，您忘記將其包裝在""中。 所以在你的代碼中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>

Answer 2

您顯然正在使用pairheader ，因此 javascript 需要一個變量。 該變量未定義，因此出錯。 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>

Answer 3

您的代碼有問題。

您正在使用pairsblock作為參數。 沒關系。

但是pairheader呢？ 您正在簡單地使用它。

首先，您需要了解如何在函數中使用參數。 然后是 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>

Answer 4

如果您的應用程序中有 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>