我如何先隐藏输入字段并先隐藏标签，然后在单击按钮时显示

debugcn 发表于 Dev

乔森

该输入字段上的棘手部分是，我必须添加！important才能隐藏输入字段！重要的是，如何删除display：inline-block？

我的目标是先隐藏输入字段，然后在我单击添加另一个次要许可证时将其显示。请注意，我无法编辑我使用的库中默认的样式代码

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

哈克自然

我已经使用window.onloadevent在默认情况下隐藏了这些输入字段，然后，如果您单击按钮，它们将可见。

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