简体   繁体   English

当按钮单击JS时显示2个文本框

[英]Showing 2 text boxes when button click JS

I have implemented a coding to show a text-box when the user clicks a button. 我实现了一种编码,以在用户单击按钮时显示一个文本框。 I need to modify that coding to view 2 text-boxes when user clicks that same button. 我需要修改该编码以在用户单击同一按钮时查看2个文本框。 I'll put the coding down below. 我将代码放在下面。 Thanks! 谢谢!

  <div class="form-group">
    <div class="col-sm-9">
  <div id="welcomeDiv"  class="answer_list" style="display:none;">  <input type="text" /></div>

  <input type="button" name="answer" value="Customize Size" onclick="showDiv()" />

</div>

function showDiv(){
      $( "#welcomeDiv" ).show( "slow" );
}

Try this one . 试试这个。

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#input1").hide();
             $("#input2").hide();
        $("#hide").click(function(){
            $("#input1").hide();
             $("#input2").hide();
        });
        $("#show").click(function(){
            $("#input1").show();
             $("#input2").show();
        });
    });
    </script>
    </head>
    <body>

    <input type="text" id="input1"/>
    <input type="text" id="input2"/>

    <button id="hide">Hide</button>
    <button id="show">Show</button>

    </body>
    </html>

Hope this help :) 希望这个帮助:)

this is exactly same like your code check this out this is fiddle link and with code snippet also 这与您的代码完全相同,请检查这是小提琴链接,并附带代码片段

 <div class="form-group">
    <div class="col-sm-9">
  <div id="welcomeDiv"  class="answer_list">  <input type="text" /></div>
  <input type="button" name="answer" value="Customize Size" />
</div>

this is javascript little bit different but you will get it 这是JavaScript一点点不同,但你会得到它

$("input[type='button']").click(function(){
      $("#welcomeDiv").show('slow');
});

i dont like to give style in elements so use css.css 我不喜欢在元素中提供样式,所以使用css.css

#welcomeDiv{
  display:none;
}

 $("input[type='button']").click(function(){ $("#welcomeDiv").show('slow'); }); 
 #welcomeDiv{ display:none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <div class="col-sm-9"> <div id="welcomeDiv" class="answer_list"> <input type="text" /></div> <input type="button" name="answer" value="Customize Size" /> </div> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM