한 번만 텍스트 상자를 추가하십시오

Question

클릭 상자에 텍스트 상자를 추가하는 기능이있는 확인란이 있습니다. 지금 문제는 확인란을 클릭 할 때마다 새 텍스트 상자가 나타나고 확인란을 클릭하면 10 번 텍스트 상자가 생깁니다. 그것을 막을 수 없으며 텍스트 상자를 사용할 수 없으면 제대로 작동하지 않는 기능이 있기 때문에 비활성화 된 텍스트 상자를 한 번 클릭하면 사용할 수 없습니다. 이것에 대한 도움을 주시면 감사하겠습니다.

function myFunction() { 
    //check if text box with id "parent" exists, add if doesn't 
    if(!document.getElementById("parent")) { 
     var span = document.createElement('SPAN'); 
     span.innerHTML = '<input id="parent" name = "parent" type="textbox" />'; 
     document.getElementById("DemoteContainer").appendChild(span); 
    } 
} 

나 :

<script> 
var tmp=1; 
function myFunction() { 
if(tmp%2==1) 
{ 
var span = document.createElement('SPAN'); 
span.innerHTML = '<input id="parent" name = "parent" type="textbox" />'; 
document.getElementById("DemoteContainer").appendChild(span); 
tmp++; 
} 
else 
{ 
var d = document.getElementById("DemoteContainer"); 
var d_nested = document.getElementById("parent"); 
var throwawayNode = d.removeChild(d_nested); 
tmp++; 
} 
} 
</script> 

Answer 1

<input onClick="myFunction();" id="demoteTask" name="demoteTask" type="checkbox"/>&nbsp;<label for"demoteTask_cbx">Demote to Child</label> 
 

 
<span id="DemoteContainer"></span> 
 

 
<script> 
 
function myFunction() { 
 
    var checkBox = document.getElementById('demoteTask'); 
 
    if (!checkBox.checked) { 
 
    document.getElementById("parent").remove() 
 
    } else { 
 
    var span = document.createElement('span'); 
 
    span.innerHTML = '<input id="parent" name = "parent" type="textbox" />'; 
 
    document.getElementById("DemoteContainer").appendChild(span); 
 
    } 
 
} 
 
    
 
    
 
    
 
</script>

Answer 2

당신이 이전과 같은 텍스트 상자를 추가하는 요소 (텍스트 상자)이 존재하는지 확인할 수 있습니다 :

<input onClick="myFunction();" id="demoteTask" name="demoteTask" type="checkbox"/>&nbsp;<label for"demoteTask_cbx">Demote to Child</label> 

<span id="DemoteContainer"></span> 

<script> 
function myFunction() { 
var span = document.createElement('SPAN'); 
span.innerHTML = '<input id="parent" name = "parent" type="textbox" />'; 
document.getElementById("DemoteContainer").appendChild(span); 
} 
</script> 

나는 이런 식으로 뭔가를 달성하고자하는

function myFunction() { 
    //check if text box with id "parent" exists, add if doesn't 
    if(!document.querySelector("#DemoteContainer input#parent")) { 
     var span = document.createElement('SPAN'); 
     span.innerHTML = '<input id="parent" name = "parent" type="textbox" />'; 
     document.getElementById("DemoteContainer").appendChild(span); 
    } 
} 

Answer 3

t

document.getElementById("DemoteContainer").innerHTML = '<input id="parent" name = "parent" type="textbox" />';

Answer 4

는 다음 중 하나에 스크립트를 교체 : extbox 대신에 appendChild의, 용기의 전체 내용을 대체하는 innerHTML을을 사용하여 다시 클릭 될 때마다 생성 -

<script> 
function myFunction() { 
    var elem = document.getElementById("parent"); 
    if(elem != null) 
elem.parentNode.removeChild(elem); 
var span = document.createElement('SPAN'); 
span.innerHTML = '<input id="parent" name = "parent" type="textbox" />'; 
document.getElementById("DemoteContainer").appendChild(span); 
// document.getElementById("demoteTask").disabled = true; 
} 
</script>