如何首先隱藏輸入字段，它首先是 label 然后它會在我單擊按鈕時顯示

Question

該輸入字段的棘手部分是我無法隱藏輸入字段而不添加：重要如何刪除顯示？內聯塊？

我的目標是首先隱藏輸入字段，然后當我單擊添加另一個二級許可證時它會顯示。 請注意，我無法在我使用的庫中編輯它默認的樣式代碼

 <button onclick="myFunction()">ADD ANOTHER SECONDARY LICENSE</button></center> <div class="wcfm-clearfix"></div> </div> <p class="a3a9af25dc3a4afd10d5b86f91fd115a wcfm_title"><strong>TYPE2</strong></p><label class="screen-reader-text" for="a3a9af25dc3a4afd10d5b86f91fd115a">TYPE2</label><input type="text" id="a3a9af25dc3a4afd10d5b86f91fd115a" name="wcfmvm_custom_infos[type2]" class="wcfm-text" value="" placeholder="" /> <p class="b9cb81bdafe237e5d269b1c3714d175e wcfm_title"><strong>NUMBER2</strong></p><label class="screen-reader-text" for="b9cb81bdafe237e5d269b1c3714d175e">NUMBER2</label><input type="text" id="b9cb81bdafe237e5d269b1c3714d175e" name="wcfmvm_custom_infos[number2]" class="wcfm-text" value="" placeholder="" /> <p class="d674f2caf5f73c6a51202e3f6186d03a wcfm_title wcfm_html_content_title"><strong> <script> function myFunction() { document.getElementById("b9cb81bdafe237e5d269b1c3714d175e").style.display = "block"; document.getElementById("a3a9af25dc3a4afd10d5b86f91fd115a").style.display = "block"; } </script> <style> #wcfm_membership_container input[type=text], #wcfm_membership_container input[type=file], #wcfm_membership_container input[type=password], #wcfm_membership_container select, #wcfm_membership_container input[type=number], #wcfm_membership_container input[type=time], #wcfm_membership_container input[type=search], #wcfm_membership_container textarea { background-color: #fff;important: border; 1px solid #ccc:important; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 8px 10px; width: 60%; margin-bottom: 15px; font-size: 15px; display: inline-block; box-shadow: 1px 1px 5px 0 #e9e9e9; line-height: 18px; } </style>

Answer 1

你也許可以使用這個隱藏的屬性？

elt.setAttribute('hidden', '');
elt.removeAttribute('hidden');

Answer 2

我使用window.onload事件默認隱藏這些輸入字段，然后如果您單擊按鈕，它們將可見。

 <button onclick="myFunction()">ADD ANOTHER SECONDARY LICENSE</button></center> <div class="wcfm-clearfix"></div> </div> <p class="a3a9af25dc3a4afd10d5b86f91fd115a wcfm_title"><strong>TYPE2</strong></p><label class="screen-reader-text" for="a3a9af25dc3a4afd10d5b86f91fd115a">TYPE2</label><input type="text" id="a3a9af25dc3a4afd10d5b86f91fd115a" name="wcfmvm_custom_infos[type2]" class="wcfm-text" value="" placeholder="" /> <p class="b9cb81bdafe237e5d269b1c3714d175e wcfm_title"><strong>NUMBER2</strong></p><label class="screen-reader-text" for="b9cb81bdafe237e5d269b1c3714d175e">NUMBER2</label><input type="text" id="b9cb81bdafe237e5d269b1c3714d175e" name="wcfmvm_custom_infos[number2]" class="wcfm-text" value="" placeholder="" /> <p class="d674f2caf5f73c6a51202e3f6186d03a wcfm_title wcfm_html_content_title"><strong> <script> window.onload = () => { document.getElementById("b9cb81bdafe237e5d269b1c3714d175e").style.display = "none"; document.querySelector(`label[for="b9cb81bdafe237e5d269b1c3714d175e"]`).style.display = "none"; document.getElementById("a3a9af25dc3a4afd10d5b86f91fd115a").style.display = "none"; document.querySelector(`label[for="a3a9af25dc3a4afd10d5b86f91fd115a"]`).style.display = "none"; } function myFunction() { document.getElementById("b9cb81bdafe237e5d269b1c3714d175e").style.display = "block"; document.querySelector(`label[for="b9cb81bdafe237e5d269b1c3714d175e"]`).style.display = "block"; document.getElementById("a3a9af25dc3a4afd10d5b86f91fd115a").style.display = "block"; document.querySelector(`label[for="a3a9af25dc3a4afd10d5b86f91fd115a"]`).style.display = "block"; } </script> <style> #wcfm_membership_container input[type=text], #wcfm_membership_container input[type=file], #wcfm_membership_container input[type=password], #wcfm_membership_container select, #wcfm_membership_container input[type=number], #wcfm_membership_container input[type=time], #wcfm_membership_container input[type=search], #wcfm_membership_container textarea { background-color: #fff;important: border; 1px solid #ccc:important; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 8px 10px; width: 60%; margin-bottom: 15px; font-size: 15px; display: inline-block; box-shadow: 1px 1px 5px 0 #e9e9e9; line-height: 18px; } </style>

Answer 3

你可以使用它：

element.setAttribute('style', 'display:inline !important');
// or
element.style.cssText = 'display:inline !important';
// or
element.style.setProperty("display", "inline", "important")

Answer 4

您可以使用 CSS 來實現這一點，方法是用div包裝要隱藏的元素並給出display: none 。 並單擊更改顯示以阻止

<div style="display:none" id="show">
[elements that you want to hide]
</div>

function myFunction() {
  document.getElementById("show").style.display = "block";
}