在按鈕單擊事件后顯示文本框

Question

我試圖在按鈕單擊事件后生成一個文本框。 代碼如下。

<div id="welcomeDiv"  class="answer_list" > WELCOME </div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
</div>
<?php if(isset($_POST['button'])) { ?>
<?php echo "<script type=\"text/javascript\">
   function showDiv() {

   <input type="text" id="textInput" value="..." />
   document.getElementById('welcomeDiv').style.display = "block"; </script> ";
   }
   </script>" ?> ;
<?php } ?>

但是按鈕點擊事件功能無法正常工作。 有什么想法嗎？

Answer 1

您還可以在單​​擊按鈕時創建CSS並顯示可見的文本字段

希望以下示例對您有幫助

 function onButtonClick(){ document.getElementById('textInput').className="show"; } 

 .hide{ display:none; } .show{ display:block; } 

 <div class="answer_list" > WELCOME </div> <input type="button" name="answer" value="Show Text Field" onclick="onButtonClick()" /> <input class="hide" type="text" id="textInput" value="..." /> 

Answer 2

使用JQuery可以做到，這是一個FIDDLE

<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" />
<br>
<br>
<input type="text" id="textInput" value="" hidden/>

$(document).ready(function() {
  $("#myButton").click(function() {
    $("#textInput").show();
  });
});

使用純 JavaScript，這是一個問題

<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" onclick="showInputBox()" />
<br>
<br>
<input type="text" id="textInput" value="" hidden/>

<script>
  function showInputBox() {
    if (document.getElementById("textInput")) {
      document.getElementById("textInput").style.display = 'block';
      alert("Yes");
    } else {
      //IF INPUT BOX DOES NOT EXIST
      var inputBox = document.createElement("INPUT");
      inputBox.setAttribute("type", "text");
      inputBox.setAttribute("id", "dynamicTextInput");
      document.body.appendChild(inputBox);
      alert("No");
    }
  }
</script>

Answer 3

您不需要使用PHP！ 最好將Jquery用於此操作。

 $(document).ready(function() { $("#myButton").click(function() { $("#myButton").after('<input type="text" id="textInput" value="">'); }); }); 

 input{ display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="welcomeDiv" class="answer_list"> WELCOME </div> <br> <input type="button" id="myButton" name="answer" value="Show Div" /> 

Answer 4

嗨，瑞安，請檢查此代碼，它將創建一個文本框，並將其添加到按鈕之前。

 <div id="welcomeDiv"  class="answer_list" > WELCOME </div>
 <div id="tbox_div">
 </div>
 <input type="button" name="answer" value="Show Div" onclick="showDiv()" />
 <script>
 function showDiv(){
var newtextbox ='';
if (!document.getElementById("textInput")) {
 newtextbox += '<input type="text" id="textInput" value="..." />'; 
    document.getElementById('tbox_div').innerHTML+=newtextbox;
  }
  }

如果要添加多個文本框，則刪除此if條件。

if (!document.getElementById("textInput"))

Answer 5

我想在按下按鈕時創建一個文本框，但我希望文本框出現在按鈕上方。

我怎么做？

對不起我的英語不好。