html 測試 單入 單出

html 測試 單入 單出

<pre style="white-space: pre-wrap; overflow-wrap: break-word; word-break: break-all"> <<!>div id="THIS_ID"> <<!>textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical"> HTML input <<!>/textarea> <<!>div class="DP">00<<!>/div><<!>/div> <!-------------------------------------> <<!>script> WWFT('THIS_ID','400'); <<!>/script> </pre>

00

 
<style>
  
.LLtext, .LLif{  width:100%; background-color:azure;font-size:18px}

.LRC { background-color:azure;
     cursor:pointer;     
     float:left; display:     
     table-cell;
     vertical-align: middle;   
     text-align: center;   
     width: 80px;   
     border: thin solid black;
     font-size:18px }
</style>

<script>/* --------單入 單出-----LOAD-----------*/
function WWFT(x,w1){
var x0 = document.getElementById(x);
var x1 = x0.querySelector(".DP");
var strVar="";
strVar+= "<table border='2' style='width: 100%;'>";
strVar+= "<tbody >";
strVar+= "<tr >";
strVa += "<form>";
strVar+= "<div class='LRC' id='" + x + "AL1' onclick='WWdp(this.id)'>預覽</div>";
strVar+= "<div class='LRC' id='" + x + "AL2' onclick='WWin(this.id)'>寫程式</div>";
strVar+= "<div class='LRC' id='" + x + "AL3' onclick='WWrs(this.id)'>還原</div>
";
strVar += "<textarea style='height:" + w1 + "px' class='LLtext' id='" + x+ "TTL' spellcheck='false' wrap='logical'>LLLLLLLLLLLLLLLLL";
strVar += "<\/textarea>";
strVar += "<iframe style='height:" + w1 + "px' class='LLif' id='" + x + "ifL' ><\/iframe>";
strVar += "<\/form>";
strVar += "</td>";
strVar += "</tbody>";
strVar += "</table>";
x1.innerHTML=strVar ;
WWrs(x+"AL1");
}
</script>


<script>/* --------單入 單出-----DP-----------*/
function WWdp(qq1){
var Mid= qq1.substring(0,qq1.length-3);
document.getElementById(Mid+'AL1').style.backgroundColor = "azure";
document.getElementById(Mid+'AL2').style.backgroundColor = "gainsboro";

document.getElementById(Mid+'TTL').style.display='none';
document.getElementById(Mid+'ifL').style.display='block';
var Ttext = document.getElementById(Mid+'TTL').value;
var Ri= document.getElementById(Mid+'ifL');
Ri.innerHTML = "";
var ifrw = (Ri.contentWindow) ? Ri.contentWindow : (Ri.contentDocument.document) ? Ri.contentDocument.document : Ri.contentDocument;
ifrw .document.open();
ifrw .document.write(Ttext);
ifrw .document.close();}
</script>

<script>/* --------單入 單出-----rs-----------*/
function WWrs(qq1){
var Mid= qq1.substring(0,qq1.length-3);
var x0 = document.getElementById(Mid);
var LL = x0.querySelector(".LLtextA");
document.getElementById(Mid+'TTL').value = LL.value;
WWdp(qq1);}
</script>

<script>/* --------單入 單出-----input-----------*/
function WWin(qq1){
var Mid= qq1.substring(0,qq1.length-3);

document.getElementById(Mid+'AL1').style.backgroundColor = "gainsboro";
document.getElementById(Mid+'AL2').style.backgroundColor = "azure";
document.getElementById(Mid+'TTL').style.display='block';
document.getElementById(Mid+'ifL').style.display='none';
}
</script>

Edit