ボタンのクリックイベントの後にテキストボックスを表示

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

ただし、ボタンのクリックイベント機能が正しく機能していません。何かご意見は？あなたがそれを行うことができますjQueryのを使用して

Answer 1

You can also create css and make visible textfield on button click

例以下の希望はあなた

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

のような、ここでは普通のJavaScriptを使用して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(); 
    }); 
}); 

だ、ここFIDDLE

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

あなたはより多くのその1つのテキストボックスを追加したい場合は、この条件ならば、これを削除してください。

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